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.