Vazby
Izolovaný rozsah s vazbou na atributy je docela fajn, ale chybí mu flexibilita vazby objektů (což je dnes zcela běžné) kromě obyčejných řetězců. Kromě toho, cokoli se změní v podřízeném oboru, neaktualizuje jeho rodičovský obor kvůli jeho jednosměrnému omezení datové vazby. Pokud z něj potřebujete něco víc, mohl by být v tomto případě vaším řešením izolovaný rozsah vazeb. A je to docela snadné, jediné, co musíte změnit, je, že místo znaku „@“ použijete symbol „=“, to je vše. Pro demonstraci použijme výše uvedenou ukázku:
V HTML:
<div ng-controller="MyCtrl">
<my-component isolated-binding-person="person">
{{isolatedBindingPerson}}
</my-component>
</div>
V JavaScriptu:
var myModule = angular.module('myModule', )
.directive('myComponent', function () {
return {
restrict:'E',
scope:{
isolatedBindingPerson:'='
}
};
})
.controller('MyCtrl', );
Všimněte si, že v našem HTML již nepotřebujeme dvojité kudrnaté závorky pro interpolaci, což znamená, že můžete skutečně vázat proměnnou, a dokonce i volání funkce! Podívejte se na následující úryvek kódu:
-- 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', ;
}
}]);
Není divu, ve vašem DOM byste měli vidět vypsaný seznam jmen osob. Navíc, protože se jedná o obousměrnou datovou vazbu, jakákoli změna v direktivě skutečně aktualizuje proměnné jejího kontroléru, resp. Úžasné! A konečně, co když chcete vyvolat událost z podřízeného oboru a zavolat funkci v jeho rodičovském oboru, dokonce předat parametr z podřízeného oboru? Zní to složitě, pojďme si to trochu rozebrat.