Question

简化代码：

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中。
在控制器中有任何额外范围的尝试都不成功。为什么这样，我如何观察变化？

Answer 1

由于@NewDev建议你可以使用$rootScope.$apply，或者只是你可以通过添加$timeout来间接地做到这一点，这会为你解雇摘要周期。

<强>代码

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

Working Plunkr

从控制器中观察工厂变量

1 个答案: