Angularjs 初始化服务

Question

我正在开发 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 之前，我的菜单看起来有一段时间是空白的。有没有办法在呈现 View 之前获取相同的值。

请让我知道，我可能已经尝试了所有可能的方法来做到这一点，但没有任何效果:(

PS:我使用的是 AngularJS v1.2.9

Answer 1

从您的服务中返回一个 promise ，并在您的 Controller 的解析中使用它:

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();
});