AngularJS: Directive with Isolated Scope

Bindings

Isolated scope met attribuut binding is wel cool, maar het mist de flexibiliteit van het binden van objecten (wat tegenwoordig heel normaal is) behalve gewone strings. Bovendien, alles wat verandert in de child scope zal de parent scope niet updaten vanwege de een-weg data-binding beperking. Als je er iets meer uit wilt halen, zou geïsoleerd bereik van bindingen je oplossing kunnen zijn in dit geval. En het is vrij eenvoudig om dat te doen, het enige wat je hoeft te veranderen is, in plaats van het “@” symbool teken, gebruik je “=” symbool, dat is het. Laten we het bovenstaande voorbeeld gebruiken om het te demonstreren.

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', );

Merk op dat we in onze HTML de dubbele accolades niet meer nodig hebben voor interpolatie, wat betekent dat je werkelijk een variabele kunt binden, en zelfs een functie kunt aanroepen! Kijk eens naar het volgende stukje code:

-- 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', ;
}
}]);

Geen verrassing, in je DOM zou je een lijst met persoonsnamen moeten kunnen zien die wordt uitgevoerd. Bovendien, omdat dit een twee-weg data-binding, zal alles wat er verandert in de richtlijn daadwerkelijk update van de controller variabelen respectievelijk. Geweldig! Tenslotte, wat als je een event wilt laten afgaan vanuit de child scope en een functie wilt aanroepen in zijn parent scope, zelfs een parameter wilt doorgeven vanuit de child scope? Dit klinkt ingewikkeld, laten we het een beetje uit elkaar halen.

Plaats een reactie