Bindings
Isolated scope avec attribute binding est plutôt cool mais il manque de la flexibilité de lier des objets (ce qui est tout à fait normal de nos jours) à l’exception des chaînes de caractères simples. En outre, tout ce qui change dans la portée enfant ne mettra pas à jour sa portée parent à cause de sa limitation de liaison de données à sens unique. Si vous avez besoin de quelque chose de plus, la portée isolée des liaisons pourrait être votre solution dans ce cas. Et c’est assez facile à faire, la seule chose que vous devez changer est qu’au lieu d’utiliser le symbole « @ », vous utilisez le symbole « = », c’est tout. Utilisons l’exemple ci-dessus pour faire une démonstration.
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', );
Notez que dans notre HTML, nous n’avons plus besoin des doubles accolades pour l’interpolation, ce qui signifie que vous pouvez réellement lier une variable, et même un appel de fonction ! Jetez un coup d’œil à l’extrait de code suivant :
-- 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', ;
}
}]);
Sans surprise, dans votre DOM, vous devriez être en mesure de voir une liste de nom de personne être sortie. De plus, comme il s’agit d’une liaison de données bidirectionnelle, tout changement dans la directive mettra à jour les variables de sa directive respectivement. Génial ! Enfin, que se passe-t-il si vous voulez déclencher un événement à partir de la portée enfant et appeler une fonction dans sa portée parent, voire même passer un paramètre à partir de la portée enfant ? Cela semble compliqué, décomposons-le un peu.