Question

我们的单页应用从$ http电话加载个人菜单树。

我使用递归模板来渲染菜单。看起来页面在从服务器检索菜单之前呈现。如何使页面渲染等到菜单数据到达？

简化代码以便于阅读

<body ng-controller="menuCtrl">
    <script type="text/ng-template" id="tree-renderer.html">
     <a href="">{{menuItem.title}}</a>
     <ul>
       <li ng-repeat="menuItem in menuItem.children" ng-include="'tree-renderer.html'></li>
     </ul>
    </script>
</body>

app.controller('menuCtrl', function($scope, $http) {
    $scope.menuItems = [];
    $scope.loadMenu = function() {
       $http.get('../service/entitlement/myMenu', {params: {user: 'userId'}}).success(function(root) {
          $scope.menuItems = root.children;
       });
    };

    $scope.loadMenu();    
});

Answer 1

您可以使用以下内容将整个导航栏包装在div中：

<div class="nav-wrapper" ng-if="menuItems.length > 0"></div>

这样导航栏就不会显示，直到menuItems对象被填满。

延迟导航栏渲染，直到http返回

1 个答案: