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

Question

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

但是，它会显示{{obj.pageData}}，直到数据完全接收为止。每次刷新页面都看到这个，很烦人!

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

这是示例代码:

查看:

<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>

Controller :

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');
    });
}]);

如果需要更多详细信息，请告诉我。

Answer 1

您可以使用 Angular ng-Clock指令以防止短暂显示 Angular html 模板。

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

</div>

另一种选择是使用 ng-bind 而不是 {{}}