AngularJS 触发并观察来自控制器的服务中的对象值变化 [英] AngularJS trigger and watch object value change in service from controller

问题描述

我正在尝试从控制器观察服务的变化.我在stackoverflow上尝试了基于许多qns的各种东西，但我一直无法让它工作.

html:

<div ng-controller="MyCtrl"><div ng-click="setFTag()">点击我</div>

javascript:

var myApp = angular.module('myApp',[]);myApp.service('myService', function() {this.tags = {答:真的，乙:真的};this.setFalseTag = function() {alert("在我的服务中-> setFalseTag");this.tags.a = false;this.tags.b = 假；//如何让MyCtrl中的手表被触发?};});myApp.controller('MyCtrl', function($scope, myService) {$scope.setFTag = function() {alert("在 MyCtrl->setFTag");myService.setFalseTag();};$scope.$watch(myService.tags, function(newVal, oldVal) {alert("内部观察");控制台日志(新值)；控制台日志(oldVal)；}， 真的);});

如何让手表在控制器中触发?

jsfiddle

解决方案

尝试这样写$watch:

myApp.controller('MyCtrl', function($scope, myService) {$scope.setFTag = function() {myService.setFalseTag();};$scope.$watch(function () {返回 myService.tags;},功能(新值，旧值){/*...*/}， 真的);});

演示 小提琴

有时这种方式不起作用，特别是如果服务已从 3d 派对更新.

为了让它工作，我们必须帮助调整角度来触发消化循环.

这是一个例子:

在服务端，当我们想要更新 tags 值时，写如下:

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

I'm trying to watch for changes in a service from a controller. I tried various things based on many qns here on stackoverflow, but I've been unable to make it work.

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);

});

How do I get the watch to trigger in the Controller?

jsfiddle

解决方案

Try to write $watch by this way:

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


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

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

});

Demo Fiddle

[EDIT]

Sometimes this way will not work especially if service has been updated from 3d party.

To make it work we must help to angular to fire digest cycle.

Here is an example:

On service side when we want update tags value write something like:

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

这篇关于AngularJS 触发并观察来自控制器的服务中的对象值变化的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！