AngularJS가 컨트롤러에서 서비스의 객체 값 변경을 트리거하고 감시합니다.

AngularJS가 컨트롤러에서 서비스의 객체 값 변경을 트리거하고 감시합니다.

컨트롤러에서 서비스 변경을 감시하려고 합니다.stackoverflow에서 많은 QN을 기반으로 여러 가지를 시도했지만 잘 되지 않았습니다.

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

쓰려고 하다$watch이 방법:

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


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

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

});

데모

[편집]

특히 서드파티에서 서비스를 업데이트한 경우에는 이 방법이 작동하지 않을 수 있습니다.

작동하려면 소화 사이클을 각도로 조정해야 합니다.

다음은 예를 제시하겠습니다.

업데이트가 필요한 경우 서비스 측에서tagsvalue는 다음과 같이 기술합니다.

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

언급URL : https://stackoverflow.com/questions/20667474/angularjs-trigger-and-watch-object-value-change-in-service-from-controller