Bindings
El Isolated scope con attribute binding es bastante chulo pero carece de la flexibilidad de enlazar objetos (lo cual es bastante normal hoy en día) excepto las cadenas simples. Además, cualquier cambio en el ámbito hijo no actualizará su ámbito padre debido a su limitación de enlace de datos unidireccional. Si necesitas algo más, el ámbito aislado de los enlaces podría ser tu solución en este caso. Y es bastante fácil de hacer, lo único que necesitas cambiar es que en lugar de usar el símbolo «@», uses el símbolo «=», eso es todo. Usemos el ejemplo anterior para demostrarlo.
En HTML:
<div ng-controller="MyCtrl">
<my-component isolated-binding-person="person">
{{isolatedBindingPerson}}
</my-component>
</div>
En JavaScript:
var myModule = angular.module('myModule', )
.directive('myComponent', function () {
return {
restrict:'E',
scope:{
isolatedBindingPerson:'='
}
};
})
.controller('MyCtrl', );
Nota que en nuestro HTML, ya no necesitamos las dobles llaves para la interpolación, lo que significa que realmente puedes enlazar una variable, ¡e incluso una llamada a una función! Echa un vistazo al siguiente fragmento de código:
-- 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', ;
}
}]);
No es de extrañar, en su DOM, usted debe ser capaz de ver una lista de nombre de la persona que se emite. Además, dado que se trata de un enlace de datos bidireccional, cualquier cambio en la directiva actualizará las variables de su controlador respectivamente. Espectacular. Finalmente, ¿qué pasa si quieres disparar un evento desde el ámbito hijo y llamar a una función en su ámbito padre, incluso pasar un parámetro desde el ámbito hijo? Esto suena complicado, vamos a desglosarlo un poco.