我正在使用AngularJs项目,该项目使用服务调用从服务器加载顶级导航项目
App.service('Menu', function($http){
return {
get:function(callback){
$http.get('api/menu.json').success(function(menuData){
callback(menuData);
});
}
}
});
我在下面提到的BaseController
中使用了相同的内容
App.controller('BaseCtrl', function($scope, Menu){
$scope.menuData = {};
Menu.get(function(menuData){
$scope.menuData = menuData;
});
});
我的菜单显示空白一段时间,直到服务调用成功并将值分配给$scope.menuData
有没有办法在渲染视图之前获取相同内容。
请让我知道,我可能已经尝试了所有可行的方法,但没有任何效果:(
PS:我正在使用AngularJS v1.2.9
答案 0 :(得分:3)
在渲染视图之前确保数据可用的最佳方法是使用路线上的resolve
属性。
如果它返回一个promise,它将在实际呈现你的视图之前解析该promise。
.when('/blah', {
templateUrl: '/path/to/view.html',
controller: 'myController',
resolve: {
menuItems: function($http){
return $http.get('api/menu.json');
}
}
});
该值将作为依赖项传递给您的控制器:
angular.controller('myController', function(menuItems){
$scope.menuData = menuItems;
});
答案 1 :(得分:3)
从您的服务中返回一个承诺,并在您的控制器的决心中使用该承诺:
app.service('Menu', function($http) {
var menuData = null;
var promise = $http.get('api/menu.json').success(function (data) {
menuData = data;
});
return{
getMenuPromise: promise,
getMenuData:function(){
return menuData;
}
};
});
并在您的路线定义中:
$routeProvider
.when('/home',{controller:'BaseCtrl',
templateUrl:'../homeTpl.html',
resolve:{
'menuData':function(Menu){
return Menu.getMenuPromise;
}
}})
现在,当BaseCtrl
被实例化时,数据就在那里:
app.controller('BaseCtrl', function($scope,Menu) {
$scope.menuData = MyService.getMenuData();
});