Question

当我在控制器A进行更改时，我需要反映控制器B的某些更改（在某些事件中）。为此，我正在使用服务。当我从FirstCtrl更改服务值时，ng-change不会在SecondCtrl中触发。我有什么遗漏或需要改变吗？

请注意我使用1.5.6角。并且不想使用手表甚至范围。以下是我的代码。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

因为你不想使用$ scope尝试修改代码，以便在angular js中使用$ emit和$ on功能来在两个控制器之间进行通信。您可以参考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
      })

    };
  }
]);

Answer 2

然后，唯一的方法是直接复制控制器中数据对象的引用。请注意，您不需要更改ng来更新值。

如果你想要别的东西，要么将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**

从服务

3 个答案: