javascript - 从服务更改值时 ng-change 不会触发

Question

当我在 Controller A 上进行更改时，我需要反射(reflect)对 Controller B 的一些更改(在某些事件中)。为此，我正在使用一项服务。当我从 FirstCtrl 更改服务值时，ng-change 不会在 SecondCtrl 上触发。有什么我遗漏或需要更改的吗？

请注意，我使用的是 angular 1.5.6。并且不想使用 watch 甚至范围。下面是我的代码。

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 功能在两个 Controller 之间进行通信。可以引用this link .

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

    };
  }
]);