Bindungen
Der isolierte Bereich mit Attributbindung ist irgendwie cool, aber es fehlt die Flexibilität, Objekte zu binden (was heutzutage ziemlich normal ist), außer einfachen Strings. Außerdem wird alles, was sich im untergeordneten Bereich ändert, den übergeordneten Bereich nicht aktualisieren, da die Datenbindung nur in eine Richtung möglich ist. Wenn Sie etwas mehr davon brauchen, könnte der isolierte Bereich von Bindungen in diesem Fall Ihre Lösung sein. Das einzige, was Sie ändern müssen, ist, dass Sie statt des „@“-Symbols das „=“-Symbol verwenden, das ist alles. Nehmen wir das obige Beispiel zur Veranschaulichung:
In HTML:
<div ng-controller="MyCtrl">
<my-component isolated-binding-person="person">
{{isolatedBindingPerson}}
</my-component>
</div>
In JavaScript:
var myModule = angular.module('myModule', )
.directive('myComponent', function () {
return {
restrict:'E',
scope:{
isolatedBindingPerson:'='
}
};
})
.controller('MyCtrl', );
Beachten Sie, dass wir in unserem HTML-Code die doppelten geschweiften Klammern für die Interpolation nicht mehr benötigen, was bedeutet, dass Sie tatsächlich eine Variable und sogar einen Funktionsaufruf binden können! Werfen Sie einen Blick auf den folgenden Codeschnipsel:
-- HTML --<div ng-controller="MyCtrl">
<my-component isolated-binding-people="showPeople()">
<ul>
<li ng-repeat="person in isolatedBindingPeople">
{{person}}
</li>
</ul>
</my-component>
</div>-- JavaScript --var myModule = angular.module('myModule', )
.directive('myComponent', function () {
return {
restrict:'E',
scope:{
isolatedBindingPeople:'='
}
};
})
.controller('MyCtrl', ;
}
}]);
Überraschenderweise sollten Sie in Ihrem DOM eine Liste von Personennamen sehen können, die ausgegeben werden. Da es sich um eine zweiseitige Datenbindung handelt, werden alle Änderungen in der Richtlinie auch die entsprechenden Variablen des Controllers aktualisieren. Großartig! Und was ist, wenn Sie ein Ereignis aus dem Child-Bereich auslösen und eine Funktion im Parent-Bereich aufrufen oder sogar einen Parameter aus dem Child-Bereich übergeben möchten? Das hört sich kompliziert an, lassen Sie es uns ein wenig aufschlüsseln.