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追加することで、間接的に使用することもできます。$timeout

コード

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

働くプランカー

于 2015-07-20T17:59:06.807 に答える