我有服务,说:
factory('aService', ['$rootScope', '$resource', function ($rootScope, $resource) {
var service = {
foo: []
};
return service;
}]);
Run Code Online (Sandbox Code Playgroud)
我想foo用来控制用HTML呈现的列表:
<div ng-controller="FooCtrl">
<div ng-repeat="item in foo">{{ item }}</div>
</div>
Run Code Online (Sandbox Code Playgroud)
为了让控制器检测何时aService.foo更新,我将这个模式拼凑在一起,我将aService添加到控制器$scope,然后使用$scope.$watch():
function FooCtrl($scope, aService) {
$scope.aService = aService;
$scope.foo = aService.foo;
$scope.$watch('aService.foo', function (newVal, oldVal, scope) {
if(newVal) {
scope.foo = newVal;
}
});
}
Run Code Online (Sandbox Code Playgroud)
这感觉很长,我一直在每个使用服务变量的控制器中重复它.有没有更好的方法来完成观察共享变量?
我已经阅读过这个问题的线程,例如:AngularJS中的视图没有更新,但我仍然无法理解如何在我的简单示例中应用它.
我有这个功能:
function MyPageView($scope) {
var myModel = new MyModel();
$scope.myModel = myModel;
}
Run Code Online (Sandbox Code Playgroud)
何时myModel在代码中的其他位置更新(当用户单击,交互,发送XHR请求时),它不会更新我的视图.我知道我需要用$ apply做点什么,但我不知道在哪里以及如何做.
有人可以向我解释如何为这个简单的用例解决这个问题?
我的模型看起来像这样(如果问题是必要的) - 它内部没有AngularJS代码:
var MyModel = function() {
var _this = this;
...
_this.load = function(){...};
_this.updateModel = function(){...};
...
return _this;
}
Run Code Online (Sandbox Code Playgroud)
添加JSfiddle示例: http ://jsfiddle.net/DAk8r/2/