2

简化代码：

var myApp = angular.module("myApp", []);

myApp.factory("mySrvc", function($window) {
  var win = angular.element($window);
  var foo = {
    bar: 0
  };
  
  win.bind("click", function(){
    foo.bar = foo.bar + 1;
    alert("triggered! foo.bar="+foo.bar);
  });
    
  return {
    foo: foo,
    update: function() {
      foo.bar = foo.bar + 1
    }
  };
});

myApp.controller("myCtrl", function(mySrvc) {
  this.foo = mySrvc.foo;
  mySrvc.update();
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<html>
  <body ng-app="myApp">
    <div ng-controller="myCtrl as ctrl">
      {{ctrl.foo.bar}}
    </div>
  </body>
</html>

现在，当我运行应用程序时，控制器中的更新触发器foo.bar成功更新为 1，并且来自 {{}} 模型的观察者相应地更新了 html。但是它通过单击鼠标在工厂本身更新，这与更新功能完全相同，更改不会出现在 HTML 中。
在控制器中具有额外范围的任何尝试均不成功。为什么会这样，我如何观察变化？

4

1 回答 1

2

正如@NewDev 建议的那样，您可以使用$rootScope.$apply或只是通过添加$timeoutwhich 将为您触发摘要循环来间接执行此操作。

代码

win.bind("click", function() {
    $timeout(function() {
       foo.bar = foo.bar + 1;
       alert("triggered! foo.bar=" + foo.bar);
    });
});

工作Plunkr

于 2015-07-20T17:59:06.807 回答