异步数据获取和角度库

Question

“我有以下问题:我想从异步rest调用中获取json，并在Angular库(在我的例子中是angular-ui-tree和angular-charts)的一些现有指令中使用它。

这是一个简单的例子，用angular-ui-tree来解释我的问题。服务：

var mod = angular.module("user.services");
mod.factory("userService", ["$http",  function ($http) {

    return {
        getUserMenu: function () {
        //call rest
            return $http.get('/user/menu').then(function (response) {
                    return response.data;
            });
        }
    };
}]);

控制器：

var mod = angular.module("admin.controllers");
$scope.menu = [];
userService.getUserMenu().then(function(menuResp){
     $scope.menu = menuResp;
};
$scope.showbody = true;
$scope.selectedItem = {}; 
$scope.options = {};
...

页面(它只是一个片段)：

<div ng-controller="MenuListCtrl">
<script type="text/ng-template" id="items_renderer.html">
   <div ui-tree-handle>... </div>
   <ol ui-tree-nodes="options" ng-model="item.items">
    <li ng-repeat="item in item.submenu" ui-tree-node ng-include="'items_renderer.html'"></li>
    </ol>
</script>
<div ui-tree="options">
<ol ui-tree-nodes ng-model="list" >
 <li ng-repeat="item in menu" ui-tree-node ng-include="'items_renderer.html'"></li>
</ol>
</div>

当我打开我的页面时，树被正确地呈现，但我在控制台中有一个错误。在Angular-ui的情况下，错误是“无法读取未定义的属性'0‘”。我认为这是因为当控制器加载菜单变量时没有设置。

也许这种方式是错误的。我认为解决方案是在数据加载后渲染angular-ui-tree片段。如下所示：

var mod = angular.module("tnp.admin.controllers");
userService.getUserMenu().then(function(menuResp){
//render tree template with menuResp data or append in my fragment the angular-ui-tree directive with menuResp data
};

我在其他库中遇到了这个问题。错误是不同的，但我认为基本问题是相同的。有没有人能帮我？我如何渲染我的片段这个菜单数据？谢谢！

Answer 1

我不明白为什么需要在您的服务中声明menu。在调用服务进行填充之前，您应该确保在控制器中将$scope.menu设置为空数组。