Bindings
Lo scope isolato con il binding degli attributi è abbastanza figo ma manca della flessibilità di legare oggetti (che è abbastanza normale al giorno d’oggi) eccetto le semplici stringhe. Inoltre, qualsiasi cambiamento nell’ambito figlio non aggiornerà il suo ambito genitore a causa della sua limitazione di data-binding a senso unico. Se avete bisogno di qualcosa di più, l’ambito isolato dei binding potrebbe essere la vostra risoluzione in questo caso. Ed è abbastanza facile farlo, l’unica cosa che dovete cambiare è, invece di usare il simbolo “@”, usate il simbolo “=”, tutto qui. Usiamo l’esempio qui sopra per dimostrarlo.
In HTML:
<div ng-controller="MyCtrl">
<my-component isolated-binding-person="person">
{{isolatedBindingPerson}}
</my-component>
</div>
In JavaScript:
var myModule = angular.module('myModule', )
.directive('myComponent', function () {
return {
restrict:'E',
scope:{
isolatedBindingPerson:'='
}
};
})
.controller('MyCtrl', );
Nota che nel nostro HTML, non abbiamo più bisogno delle doppie parentesi graffe per l’interpolazione, il che significa che puoi effettivamente legare una variabile, e anche una chiamata di funzione! Date un’occhiata al seguente frammento di codice:
-- 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', ;
}
}]);
Nessuna sorpresa, nel vostro DOM, dovreste essere in grado di vedere una lista di nomi di persone in uscita. Inoltre, poiché questo è un data-binding a due vie, qualsiasi cambiamento nella direttiva aggiornerà effettivamente le variabili del suo controllore rispettivamente. Fantastico! Infine, cosa succede se si vuole lanciare un evento dall’ambito figlio e chiamare una funzione nel suo ambito genitore, anche passando un parametro dall’ambito figlio? Sembra complicato, vediamo di spiegarlo un po’.