Bindningar
Isolerad räckvidd med attributbindning är ganska häftigt, men det saknas flexibilitet när det gäller att binda objekt (vilket är ganska normalt numera) förutom vanliga strängar. Dessutom kommer allt som ändras i det underordnade området inte att uppdatera det överordnade området på grund av begränsningen för envägsbindning av data. Om du behöver något mer kan isolated scope of bindings vara din lösning i det här fallet. Det är ganska enkelt att göra det, det enda du behöver ändra är att du använder symbolen ”=” i stället för ”@”. Låt oss använda exemplet ovan för att demonstrera.
I HTML:
<div ng-controller="MyCtrl">
<my-component isolated-binding-person="person">
{{isolatedBindingPerson}}
</my-component>
</div>
I JavaScript:
var myModule = angular.module('myModule', )
.directive('myComponent', function () {
return {
restrict:'E',
scope:{
isolatedBindingPerson:'='
}
};
})
.controller('MyCtrl', );
Märk att i vår HTML behöver vi inte längre de dubbla hängande parenteserna för interpolering, vilket innebär att du faktiskt kan binda en variabel och till och med ett funktionsanrop! Ta en titt på följande kodutdrag:
-- 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', ;
}
}]);
Ingen överraskning, i din DOM bör du kunna se en lista med personers namn som skrivs ut. Eftersom detta är en dubbelriktad databindning kommer alla ändringar i direktivet att uppdatera kontrollantens variabler. Fantastiskt! Slutligen, vad händer om du vill utlösa en händelse från barnets scope och anropa en funktion i dess överordnade scope, och till och med skicka en parameter från barnets scope? Detta låter komplicerat, låt oss bryta ner det lite.