Bindings
Isolated scope z wiązaniem atrybutów jest całkiem fajny, ale brakuje mu elastyczności wiązania obiektów (co jest całkiem normalne w dzisiejszych czasach) poza zwykłymi łańcuchami. Poza tym, cokolwiek zmieni się w zakresie dziecka, nie zaktualizuje jego zakresu nadrzędnego z powodu jednokierunkowego ograniczenia wiązania danych. Jeśli potrzebujesz czegoś więcej, izolowany zakres wiązań może być twoim rozwiązaniem w tym przypadku. I jest to dość łatwe do zrobienia, jedyną rzeczą jaką musisz zmienić jest to, że zamiast używać znaku „@”, używasz znaku „=”, to wszystko. Użyjmy powyższej próbki do zademonstrowania.
W HTML:
<div ng-controller="MyCtrl">
<my-component isolated-binding-person="person">
{{isolatedBindingPerson}}
</my-component>
</div>
W JavaScript:
var myModule = angular.module('myModule', )
.directive('myComponent', function () {
return {
restrict:'E',
scope:{
isolatedBindingPerson:'='
}
};
})
.controller('MyCtrl', );
Zauważ w naszym HTML, nie potrzebujemy już podwójnych nawiasów klamrowych do interpolacji, co oznacza, że możesz faktycznie powiązać zmienną, a nawet wywołanie funkcji! Spójrz na następujący fragment kodu:
-- 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', ;
}
}]);
Nie ma się co dziwić, w twoim DOM, powinieneś być w stanie zobaczyć listę nazwisk osób, które są wyprowadzane. Dodatkowo, ponieważ jest to dwukierunkowe powiązanie danych, wszelkie zmiany w dyrektywie będą aktualizować odpowiednio zmienne kontrolera. Super! Wreszcie, co jeśli chcesz wywołać zdarzenie z zakresu dziecka i wywołać funkcję w jego zakresie nadrzędnym, a nawet przekazać parametr z zakresu dziecka? Brzmi to skomplikowanie, rozłóżmy to trochę na czynniki pierwsze.