Question

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

但是，在完全收到数据之前，它会显示{{obj.pageData}}。每次刷新页面都会看到这一点非常烦人！

如何避免它在视图中显示{{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>

控制器：

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

您可以使用角度ng-Clock指令来阻止角度html模板的简短显示。

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

</div>

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

Answer 2

您只需设置一个条件来控制何时显示数据。为此，您可以使用ng-show或ng-if。

像这样：

<div ng-if="pageData" ng-cloack ng-repeat="obj in pageData.allChildList" class="hiding-div" ng-mouseover="showDiv()" ng-mouseleave="hideDiv()" >
    <!--- ... -->
</div>

在此示例中，AngularJS评估表达式ng-if="pageData"和它将仅在pageData真实时显示div。

此外，您可以使用ng-cloack以避免页面出现任何可能的闪烁。

Answer 3

您可以使用 Angular Resolve ，直到收到数据，然后才会呈现数据。

选中此stackoverflow

仅当从angularJS中的ajax调用完全接收到json时才更新视图

3 个答案: