AngularJS $watch-controller-variable, die von einer Richtlinie mit Rahmen
Aus der Richtlinie, ich will, um änderungen zu verfolgen, um eine controller-Variablen, die mit $watch
.
Erstellt habe ich dieses jsfiddle. (https://jsfiddle.net/hqz1seqw/7/)
Wenn die Seite geladen wird, den controller und die beiden Richtlinien $watch
- Funktion wird aufgerufen, aber wenn ich die radio-buttons, nur die regler und dir zwei $watch
Funktion aufgerufen wird. Warum nicht dir diejenigen $watch
Funktion aufgerufen wird?
Möchte ich sowohl die Richtlinien $watch
Feuer, kann ich allerdings nur eines von Ihnen (d.h. dir zwei). Nicht sicher, was ich ändern muss. Hat es etwas zu tun mit dem isolierten scope? Gibt es einen besseren Weg, dies zu tun?
AngularJS-Code:
var mod = angular.module("myApp", []);
//Controller
mod.controller("myCtrl", function($scope){
$scope.tempformat = "C";
$scope.one="25 - dir-one";
$scope.$watch('tempformat', function(nv){
alert("nv from controller");
});
$scope.two="35 - dir-two";
});
//dir-one directive
mod.directive("dirOne", function(){
return{
restrict: 'E',
template: "<p>{{info}}</p>",
scope: {info: '='
},
link: function (scope, element, attr) {
scope.$watch('tempformat', function(nv){
alert("nv from directive-one");
if(scope.tempformat === "C"){
element.find("p").append("C");
}
else if(scope.tempformat === "F"){
element.find("p").append("F");
}
});
}
}});
//dir-two directive
mod.directive("dirTwo", function($window){
return{
restrict: "EA",
template: "<p></p>",
link: function (scope, element, attr) {
scope.$watch('tempformat', function(nv){
alert("nv from directive-two");
if(scope.tempformat === "C"){
element.find("p").append("C");
}
else if(scope.tempformat === "F"){
element.find("p").append("F");
}
});
}
}
});
HTML-Code:
<div ng-app="myApp" ng-controller="myCtrl">
<h2>Temperature</h2>
<input type="radio" ng-model="tempformat" value="C"/> Celcius
<input type="radio" ng-model="tempformat" value="F"/> Farenheit
<dir-one info="one"></dir-one>
<dir-two info="two"></dir-two>
</div>
Du musst angemeldet sein, um einen Kommentar abzugeben.
Das problem ist die Tatsache, dass
dir-one
trennt Ihren Bereich von den Eltern. Es gibt einige alternativen, die getan werden können in dieser situation wie:die sich die Eltern für den angegebenen Inhalt.
Andere alternative ist, zu binden, um die
directive
selbst:und dann im html:
finden Sie unter: die Dokumentation für weitere Informationen. Besonders die Isolierung der Anwendungsbereich einer Richtlinie Bereich.
Im Allgemeinen zu isolieren Bereiche erstellen wiederverwendbare Komponenten (wie bereits in der Dokumentation), so ist dies etwas, das versucht wird (von der content bereits in der Antwort), dann würde ich die Unterstützung etwas entlang der Linien von der zweiten option können Sie festlegen, dass die Uhr Inhalte auf die
directive
selbst und Bedenken Sie, dass die "bessere" Art und Weise, dies zu tun.Aus meiner Erfahrung, und das ist einzig und allein meine eigene Präferenz wäre, würde ich die Bindung an die
directive
da ich in der Regel isolieren meinem scope(s) einen Grund.