Angularjs初始化服务

我的工作AngularJs项目，该项目有顶级导航项目使用服务呼叫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

来源

2014-04-21 Ashok Vishwakarma

看看'ng-cloak' –

@MohammadSepahvand我已经通过了ng-cloak的文档，但不明白它是如何工作的以及我的观点中的哪一部分我必须应用相同的，请问您可以请解释一下。谢谢 –

'ng-cloak'基本上不会在视图中显示绑定表达式，直到绑定实际设置完成，我认为这是您最初的问题，它是一种比防止呈现控制器/视图更好的方法，因为在某种程度上，后者杀死了几乎直接转换路线并具有非常流畅性质的SPA。 –

返回从服务承诺，并用它在你的控制器的决心：

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

来源

2014-04-21 15:20:37

问题是我的BaseCtrl没有分配给任何特定的视图，它是所有视图的通用控制器。请建议一种方法来解决控制器中的数据不在路由器中。谢谢 –

，以确保数据的最佳方式可用前呈现视图是使用resolve财产的路线上。

如果它返回一个承诺，这将解决实际渲染视图之前的承诺。

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

来源

2014-04-21 15:19:46 Josh

问题是我的BaseCtrl没有分配给任何特定的视图，它是所有视图的通用控制器。请建议一种方法来解决控制器中的数据不在路由器中。谢谢 –

@AshokVishwakarma - 你无法完成你想要的东西。你可以创建一个承诺来解决你的控制内的事情，并调用'init（）'或类似的东西，但是你不能阻止视图加载而不使用路由。在你的控制器里你可以做的最好的事情是创建一些'ready'标志，当所有内容都被加载时，它会被翻转，当它准备好时只是简单地'隐藏'或'显示'你的内容。 – Josh

Angularjs初始化服务

回答

相关问题