javascript - 仅当从angularJS中的ajax调用完全接收到json时才更新 View

我是angularJS的新手，仍然在学习。
我正在尝试在标头中创建一个导航栏，该导航条从ajax调用获取数据。

但是，它显示{{obj.pageData}}，直到完全接收到数据。
每次刷新页面时看到此消息都非常烦人！

当从JSON接收到整个数据时，如何避免在视图中显示{{obj.pageData}}而不是直接更新它？

这是示例代码：

视图：

<nav ng-app="topNavApp" ng-controller="navCtrl" class="nav">
  <div class="nav-center">
    <!--<li ng-repeat="obj in pageData.allChildList" ng-model="parentNav" ng-mouseover="parentNav=true" ng-mouseleave="parentNav=false"> -->
    <div ng-repeat="obj in pageData.allChildList" class="hiding-div" ng-mouseover="showDiv()" ng-mouseleave="hideDiv()" >
      <div>
        <a ng-href="{{obj.pagePath}}" class="main-link multiple menu-link">{{obj.pageTitle}}</a>
        <!--<span class="main-link mobile" aria-labelledby="{{obj.pageTitle}}" aria-expanded="false">{{obj.pageTitle}}</span>-->

        <!--<span ng-repeat="child in obj.secondLevelVoList" class="childNav" ng-show="parentNav">-->
        <div class="farm-links" ng-show="hovering">
          <!--<a class="prev-link" aria-labelledby="{{obj.pagetitle}}">{{obj.pageTitle}}</a>-->
          <div ng-repeat="child in obj.secondLevelChildList" class="groups-links">
            <a ng-href="{{child.pagePath}}" class="group-title">{{child.pageTitle}}</a>
            <!--<span class="group-title mobile" aria-expanded="false">{{child.pageTitle}}</span>-->
            <ul ng-repeat="subchild in child.thirdLevelChildList" class="group-links">
              <li class="second-link">
                <a ng-href="{{subchild.pagePath}}">{{subchild.pageTitle}}</a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</nav>

控制器：

angular.module('topNavApp', []).controller('navCtrl', ['$scope', '$timeout', '$http', function($scope, $timeout, $http){
    $http.get("/content/projdata/myJSONData.json").then(function(response){
        $scope.pageData = response.data;
    })['catch'](function(){
        console.log('failed');
    });
}]);

如果需要其他详细信息，请告诉我。

最佳答案

您可以使用angular ng-Clock指令来防止简短显示有角html模板。

<div class="nav-center" ng-cloak>

</div>

另一种选择是使用ng-bind代替{{}}