Sidonnat
Eristetty laajuus attribuuttisidonnaisuudella on tavallaan siistiä, mutta siitä puuttuu objektien sitomisen joustavuus (mikä on nykyään aivan normaalia) lukuun ottamatta tavallisia merkkijonoja. Sitä paitsi, kaikki muutokset child scopeissa eivät päivitä sen parent scopea sen yksisuuntaisen datan sitomisen rajoituksen vuoksi. Jos tarvitset siitä jotain enemmän, sidontojen eristetty laajuus voisi olla ratkaisusi tässä tapauksessa. Ja se on melko helppo tehdä, ainoa asia, jota sinun tarvitsee muuttaa, on käyttää ”@”-symbolin sijasta ”=”-symbolia, siinä kaikki. Käytetään yllä olevaa esimerkkiä havainnollistamaan.
HTML:
<div ng-controller="MyCtrl">
<my-component isolated-binding-person="person">
{{isolatedBindingPerson}}
</my-component>
</div>
Javaskriptissä:
var myModule = angular.module('myModule', )
.directive('myComponent', function () {
return {
restrict:'E',
scope:{
isolatedBindingPerson:'='
}
};
})
.controller('MyCtrl', );
Huomaa, että HTML:ssä emme enää tarvitse kaksoissulkumerkkejä interpoloinnissa, mikä tarkoittaa, että voit itse asiassa sitoa muuttujan ja jopa funktiokutsun! Vilkaise seuraavaa koodinpätkää:
-- 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', ;
}
}]);
Ei yllätä, DOM:issa pitäisi näkyä lista henkilön nimistä, jotka tulostetaan. Lisäksi, koska kyseessä on kaksisuuntainen datan sitominen, kaikki direktiivin muutokset päivittävät sen ohjaimen muuttujat vastaavasti. Mahtavaa! Entä lopuksi, entä jos haluat laukaista tapahtuman lapsialueelta ja kutsua funktiota sen vanhempialueelta, jopa välittää parametrin lapsialueelta? Tämä kuulostaa monimutkaiselta, puretaanpa sitä hieman.