ng-change feuert nicht, wenn der Wert vom Service geändert wird

Question

Ich muss einige Änderungen an Controller B (innerhalb eines Ereignisses) widerspiegeln, wenn ich am Controller A Änderungen vornimmt. Dafür benutze ich einen Service. Wenn ich den Dienstwert von FirstCtrl ändere, feuert ng-change nicht an SecondCtrl. Gibt es etwas, das ich vermisst habe oder ändern muss?

Bitte beachten Sie, dass ich Winkel 1.5.6 verwenden. und möchte nicht sehen oder sogar Umfang. Unten ist mein Code.

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

Die einzige Art und Weise ist dann direkt in der Steuerung die Referenz des Datenobjekts zu kopieren. Beachten Sie, dass Sie ng-change nicht benötigen, um den Wert dann zu aktualisieren.

Wenn Sie etwas anderes wollen, entweder wickeln Sie das FirstName in einem Unterobjekt von Daten und das gleiche tun ich tat:

Data = {foo:'FirstName'}; 

Oder nutzen $ beobachten, da sie die ganze Zweck dieser Funktion ist.

Hier ist ein Arbeitscode mit Kopieren des Datenobjekts in den Controller.

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 2

Der einzige Weg, ich weiß, das Problem unter Verwendung der Uhr zu lösen, leider. (Ich bin neu in Winkel.)

Vom ngChange Dokument (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** 

Answer 3

Wie Sie nicht wollen, $ Umfang nutzen versuchen, den Code zu modifizieren, $ zu verwenden emittieren und auf Funktion $ in Winkel js für die Kommunikation zwischen zwei Controllern. Sie können sich beziehen auf 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 
     }) 

    }; 
    } 
]);