如何在使用数据初始化指令之前确保服务中的$ http.get完成？

Question

如何在创建“control”指令之前检索“MyService”需要检索的所有数据，或者调用实际添加这些项的某些函数？如果没有，是否有其他推荐的方式涉及控制器等。尚未看到类似序列的基本示例。请注意，数据可能通过其他函数添加了更多值，其中必须为这些新数据元素显式调用方法。

服务：

// var app = angular.module...
app.service('MyService', function($http) {
    this.data = [];

    // Called once to first initalize the data
    $http.get('data.json').then(function data(response) {
      this.data.push(response);        
    } 
})

指令（带有自己的隔离控制器？或指向主app控制器）？：

myDirective.directive('control', ['Params', 'MyService', function(Params, MyService) {
     // Call on a method "addData(MyService.data) when the data is actually loaded
}]);

Answer 1

我认为没有办法阻止指令表单启动并等待服务的异步函数调用。但是，这里有几种选择：

1。使用ng-route并使用$routeProvider设置解析。

API：http://docs.angularjs.org/api/ngRoute。$ routeProvider

基本上，你在路线的解析器中返回一个承诺，路线的视图将等待该承诺解决。解析后，它将加载视图并启动视图中的任何控制器或指令。

2。 $watch data MyService属性data。

当$scope.$watch(function() { return MyService.data; }, function(newVal, oldVal) { // do something }, true); 更改时，请执行任何操作

ready

3。在MyService上触发$broadcast事件，在您的指令中收听MyService。

这要求您包含一些事件库，例如'EventEmitter`，并将其混合到MyService中。

4。来自MyService的$rootScope上的app.service('MyService', function($http, $rootScope) { this.data = []; var _this = this; // Called once to first initalize the data $http.get('data.json').then(function data(response) { _this.data.push(response); $rootScope.$broadcast('MyServiceReady'); } }) myDirective.directive('control', ['Params', 'MyService', function(Params, MyService) { return function(scope) { scope.$on('MyServiceReady', function() { // do something }); }; }]); 就绪事件，并在您的指令中听取它。

{{1}}