Question

我希望我的指令在服务中的模型被修改后立即更新。

我还没有实现它：

服务：

  function pickerService(){
      // picked elements
      // do something for the status
      this.pickList = [{'file':'imthefilename', 'status':'100', 'size':'20kB'},
                 {'file':'imthefilename2', 'status':'100', 'size':'20kB'},
                 {'file':'imthefilename3', 'status':'100', 'size':'20kB'}];
   }
   ...
   pickerService.prototype.test = function(){
       this.pickList.push({'test':'ya'});
   };
   ...

指令：

   ...    
   scope['pickList'] = pickerService.pickList;
   ...

我有一个按钮，它调用我的服务'test'方法。

如果我单击按钮一次没有任何反应。我希望看到：

[{'file':'imthefilename', 'status':'100', 'size':'20kB'},
 {'file':'imthefilename2', 'status':'100', 'size':'20kB'},
 {'file':'imthefilename3', 'status':'100', 'size':'20kB'},
 {'test':'ya'}
]

但我看到了变量的旧值：

[{'file':'imthefilename', 'status':'100', 'size':'20kB'},
 {'file':'imthefilename2', 'status':'100', 'size':'20kB'},
 {'file':'imthefilename3', 'status':'100', 'size':'20kB'}
]

如果我第二次点击该按钮，视图会更新。我明白了：

[{'file':'imthefilename', 'status':'100', 'size':'20kB'},
 {'file':'imthefilename2', 'status':'100', 'size':'20kB'},
 {'file':'imthefilename3', 'status':'100', 'size':'20kB'},
 {'test':'ya'}
]

而不是：

[{'file':'imthefilename', 'status':'100', 'size':'20kB'},
 {'file':'imthefilename2', 'status':'100', 'size':'20kB'},
 {'file':'imthefilename3', 'status':'100', 'size':'20kB'},
 {'test':'ya'},
 {'test':'ya'}
]

这似乎是一个计时问题，只有在我的视图按钮上单击另一次时才会更新视图。

非常感谢任何建议。

最佳，

Answer 1

我不认为AngularJS以这种方式工作，服务有点像你访问信息的单例，服务本身不会广播给你的控制器。因此，在您的控制器中，您需要运行您的服务，等待承诺完成并返回数据，然后它将自动更新您的视图和指令。可以这样想：

// your service should be defined as a service, not as just a function app.service('PickerService', [$http', function($http) { return { getFiles: function(){ return $http.get('files.json'); } } }]);

然后在您的控制器中执行此操作：

PickerService.getFiles().then(function(returnValues){ $scope.myDirectiveData = returnValues.data; });

和你的指令在绑定到范围变量时会自动更新：

<my-directive data="myDirectiveData"></my-directive>

来自服务的更新指令

1 个答案: