從服務更改價值時未觸發ng-change

Question

在控制器A上進行更改時，我需要向控制器B反映一些更改（在某些事件中）。為此，我正在使用服務。 當我從FirstCtrl更改服務值時，ng-change不會在SecondCtrl上觸發。 有什么我想念或需要改變的嗎？

請注意，我正在使用角度1.5.6。 並且不想使用手表甚至示波器。 下面是我的代碼。

 var myApp = angular.module('myApp', []); myApp.factory('Data', function() { return { FirstName: '' }; }); myApp.controller('FirstCtrl', ['Data', function(Data) { var self = this; debugger self.changeM = function() { debugger Data.FirstName = self.FirstName; }; } ]); myApp.controller('SecondCtrl', ['Data', function(Data) { var self = this; self.FirstName = Data; self.changeM = function() { alert(1); }; } ]); 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script> <div ng-app="myApp"> <div ng-controller="FirstCtrl as c"> <input type="text" ng-model="c.FirstName" data-ng-change="c.changeM()"> <br>Input is : <strong>{{c.FirstName}}</strong> <div ng-controller="SecondCtrl as c1"> Input should also be here: {{c1.FirstName}} <input type="text" ng-model="c1.FirstName" data-ng-change="c1.changeM()"> </div> </div> <hr> </div> 

Answer 1

因為您不想使用$ scope嘗試修改代碼，以便在angular js中使用$ emit和$ on功能在兩個控制器之間進行通信。 您可以參考此鏈接 。

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


myApp.factory('Data', function() {
  return {
    FirstName: ''
  };
});

myApp.controller('FirstCtrl', ['Data',
  function(Data) {
    var self = this;
    debugger
    self.changeM = function() {
      debugger
      //Data.FirstName = self.FirstName;
      Data.$on('emitData',function(event,args){
        Data.FirstName=args.message
        document.write(Data.FirstName)
      })
    };

  }
]);

myApp.controller('SecondCtrl', ['Data',
  function(Data) {
    var self = this;
    self.FirstName = Data;
    self.changeM = function() {
       Data.$emit('emitData',{
        message:Data.FirstName
      })

    };
  }
]);

Answer 2

唯一的方法就是直接在控制器內復制數據對象的引用。 請注意，您不需要ng-change即可更新該值。

如果您還想要其他東西，可以將FirstName包裝在Data的子對象中，然后執行與我相同的操作：

Data = {foo:'FirstName'};

或使用$ watch，因為這是該功能的全部目的。

這是在控制器中復制Data對象的工作代碼。

 var myApp = angular.module('myApp', []); myApp.factory('Data', function() { return { FirstName: '' }; }); myApp.controller('FirstCtrl', ['Data', function(Data) { var self = this; self.Data=Data; debugger self.changeM = function() { debugger }; } ]); myApp.controller('SecondCtrl', ['Data', function(Data) { var self = this; self.Data = Data; self.changeM = function() { alert(1); }; } ]); 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script> <div ng-app="myApp"> <div ng-controller="FirstCtrl as c"> <input type="text" ng-model="c.Data.FirstName" data-ng-change="c.changeM()"> <br>Input is : <strong>{{c.Data.FirstName}}</strong> <div ng-controller="SecondCtrl as c1"> Input should also be here: {{c1.Data.FirstName}} <input type="text" ng-model="c1.Data.FirstName" data-ng-change="c1.changeM()"> </div> </div> <hr> </div> 

Answer 3

不幸的是，我知道解決問題的唯一方法是使用手表。 （我是新來的。）

從ngChange文檔（ https://docs.angularjs.org/api/ng/directive/ngChange ）：

    The ngChange expression is only evaluated when a change in the input value causes a new value to be committed to the model.

It will not be evaluated:

    if the value returned from the $parsers transformation pipeline has not changed
    if the input has continued to be invalid since the model will stay null
    **if the model is changed programmatically and not by a change to the input value**