Bindinger
Isoleret rækkevidde med attributbinding er ret cool, men det mangler fleksibilitet i forhold til at binde objekter (hvilket er helt normalt i dag), bortset fra almindelige strenge. Desuden vil alt, hvad der ændres i det underordnede scope, ikke opdatere det overordnede scope på grund af begrænsningen af envejsbinding af data. Hvis du har brug for noget mere ud af det, kan isolerede bindinger være din løsning i dette tilfælde. Og det er ret nemt at gøre det, det eneste, du skal ændre, er, at du i stedet for at bruge symbolet “@” bruger symbolet “=”, det er det hele. Lad os bruge ovenstående eksempel til at demonstrere:
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', );
Bemærk i vores HTML, at vi ikke længere har brug for de dobbelte parenteser til interpolation, hvilket betyder, at du faktisk kan binde en variabel, og endda et funktionskald! Tag et kig på følgende kodestump:
-- 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 overraskelse, i din DOM burde du kunne se en liste over personers navne blive udgivet. Derudover, da dette er en tovejs data-binding, vil alle ændringer i direktivet faktisk opdatere sin controllers variabler henholdsvis. Awesome! Endelig, hvad hvis du ønsker at fyre en begivenhed fra barnet scope og kalde en funktion i sin overordnede scope, endda videregive en parameter langs fra barnet scope? Det lyder kompliceret, lad os bryde det lidt ned.