AngularJS: Directive with Isolated Scope

Bindings

Isolated scope with attribute binding is kind of cool but it lacks of the flexibility of binding objects (which is quite normal nowadays) except plain strings. Emellett bármi változás a gyermek hatókörben nem frissíti a szülő hatókörét az egyirányú adatkötés korlátozása miatt. Ha valami többre van szükséged belőle, a kötések izolált hatóköre lehet a megoldás ebben az esetben. És ez nagyon könnyen megvalósítható, az egyetlen dolog, amit meg kell változtatnod, hogy a “@” szimbólum jel helyett az “=” szimbólumot használod, ennyi. Használjuk a fenti példát a demonstrációhoz:

HTML-ben:

<div ng-controller="MyCtrl">
<my-component isolated-binding-person="person">
{{isolatedBindingPerson}}
</my-component>
</div>

Javascriptben:

var myModule = angular.module('myModule', )
.directive('myComponent', function () {
return {
restrict:'E',
scope:{
isolatedBindingPerson:'='
}
};
})
.controller('MyCtrl', );

Megjegyezzük, hogy a HTML-ben már nincs szükségünk a kettős szögletes zárójelekre az interpolációhoz, ami azt jelenti, hogy valóban köthetünk változót, sőt függvényhívást is! Nézzük meg a következő kódrészletet:

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

Nem meglepő, a DOM-ban látnunk kell, hogy a személynevek listája kerül kiírásra. Továbbá, mivel ez egy kétirányú adatkötés, minden változás a direktívában ténylegesen frissíti a vezérlő változóit, illetve. Félelmetes! Végül, mi van akkor, ha a gyermek hatókörből akarsz egy eseményt tüzelni, és meghívni egy függvényt a szülő hatókörében, akár egy paramétert is átadni a gyermek hatókörből? Ez bonyolultnak hangzik, bontsuk le egy kicsit.

Szólj hozzá!