从控制器观察工厂变量

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

从控制器观察工厂变量

Observing factory variable from controller

javascript

angularjs

angularjs-scope

angularjs-factory

angularjs-digest