AngularJS觸發器和從控制器服務中監視對象值的變化

Question

我試圖從控制器監視服務中的更改。我基於許多qns在stackoverflow上嘗試了各種各樣的東西，但我一直無法使它工作。

HTML：

<div ng-app="myApp"> 
    <div ng-controller="MyCtrl"> 
     <div ng-click="setFTag()">Click Me</div> 
    </div> 
</div> 

的javascript：

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

myApp.service('myService', function() { 
    this.tags = { 
     a: true, 
     b: true 
    }; 


    this.setFalseTag = function() { 
     alert("Within myService->setFalseTag"); 
     this.tags.a = false; 
     this.tags.b = false; 

     //how do I get the watch in MyCtrl to be triggered? 
    }; 
}); 


myApp.controller('MyCtrl', function($scope, myService) { 

    $scope.setFTag = function() { 
     alert("Within MyCtrl->setFTag"); 
     myService.setFalseTag(); 
    };   

    $scope.$watch(myService.tags, function(newVal, oldVal) { 
     alert("Inside watch"); 
     console.log(newVal); 
     console.log(oldVal); 
    }, true); 

}); 

如何拿到手錶的控制器來觸發？

jsfiddle

Answer 1

試圖通過這種方式來寫$watch：

myApp.controller('MyCtrl', function($scope, myService) { 


    $scope.setFTag = function() { 
     myService.setFalseTag(); 
    };   

    $scope.$watch(function() { 
     return myService.tags; 
    },      
     function(newVal, oldVal) { 
     /*...*/ 
    }, true); 

}); 

演示Fiddle

[編輯]

有時候，這種方式不會工作，特別是如果服務已從3D方更新。

爲了使其工作，我們必須幫助角度火災消化週期。

下面是一個例子：

在服務方面，當我們要更新tags值寫一樣的東西：

if($rootScope.$root.$$phase != '$apply' && $rootScope.$root.$$phase != '$digest'){ 
    $rootScope.$apply(function() { 
    self.tags = true; 
    }); 
} 
else { 
    self.tags = true; 
    }