web-dev-qa-db-ja.com

Angularjsウォッチサービスオブジェクト

サービス内のオブジェクトを監視できないのはなぜですか。単純な変数は機能しますが、オブジェクトは機能しません。 http://plnkr.co/edit/S4b2g3baS7dwQt3t8XEK?p=preview

var app = angular.module('plunker', []);

app.service('test', ['$http', '$rootScope',
            function ($http,   $rootScope) {

  var data = 0;
  var obj  = {
                "data": 0
              };

  this.add = function(){
    obj.data += 1;
    console.log('data:', obj);
  };

  this.getData     = function() { return obj; };

}]);

app.controller('TestController', ['$scope', '$rootScope', '$filter', 'test',
                          function($scope,   $rootScope,   $filter,   test) {

  //test controller
  $scope.add = function(){
    test.add();
  };
  $scope.test = test;
  $scope.$watch('test.getData()', function(newVal){
    console.log('data changes into: ', newVal)
  });
}]);
angularjsservicewatch
11
Robin Timman

等価性チェックがangular.equalsになるように、$ watch関数の最後のパラメーターとしてtrueを渡す必要があります。それ以外の場合は、参照の同等性のみがチェックされます。

_$scope.$watch('test.getData()', function(newVal){
  console.log('data changes into: ', newVal)
}, true);
_

重複する質問： $オブジェクトを見る

[〜＃〜]編集[〜＃〜]

以下で説明するように、コードには、_$scope_で参照されるサービスを持つという悪い習慣が含まれています。 _$watch_も最初の引数としてゲッター関数を受け入れるため、スコープ内で参照する必要はありません。クリーンソリューションは、この関数を使用して、監視対象の配列を 以下の回答 のように返します。 $scope.$watch(function() { return test.getData(); } ...

完全なソリューションを一覧表示するには、代わりに_$watchCollection_を使用して参照の等価性チェックの問題を解決することもできます。

13
kvetis

サービス全体をスコープに注入することは、私が行うことではありません。

私は値を返す関数を見たいと思います：

$scope.$watch(function() { return test.getData(); }, function(newVal) { 
    /* Do the stuff */
}, true);
19
Pierre Gayvallet