2014-04-10 88 views
0

「我有以下問題: 我想從異步休眠調用中獲取json,並在Angular庫的一些現有指令中使用它(在我的例子中,angular-ui-tree和angular-圖表)異步數據讀取和角庫

這是一個簡單的例子有角的UI樹的試圖解釋我的問題 的服務:

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'」。 我認爲這是因爲當控制器加載菜單var沒有設置。

也許這種方式是錯誤的。 我認爲解決方案是在數據加載後呈現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 
}; 

我對其他庫有這個問題。錯誤是不同的,但我認爲基本問題是相同的。 有人可以幫助我嗎?我怎樣才能渲染我的片段這個菜單數據? 謝謝!

+0

嘗試在您的控制器中將$ scope.menu的初始值設置爲任何菜單數據的空白版本。 –

+0

我嘗試($ scope.menu = [];)但錯誤仍然存​​在。 – zell147

回答

0

我不明白爲什麼menu需要在您的服務中聲明。在調用服務來填充它之前,您應該確保$scope.menu已設置爲控制器中的空數組。

+0

服務中的菜單是錯誤的。它沒有被使用。 – zell147