Créer des directives est la base d’angular. Cela permet de découper les vues en plusieurs composants bien distinct qui ont leur propre comportement.
En revanche il faut bien comprendre comment passer des paramètres d’un controller (ou directive) à une (autre) directive.
Etant donné que par défaut (et c’est pas plus mal), les directives ont un scope isolée, il n’est pas possible d’accéder aux variables directement définies dans le scope du composant parent.
Pour cela, Il y 3 types de paramètres différents :
- @ : pourra contenir qu’un type simple et devra être passé entre {{}}
- = : Peut contenir n’importe quel objet et pourra éventuellement être modifié dans la directive. Très utilisé pour effectuer du data-binding
- & : Permettra de passer un callback (function)
Voici un exemple d’utilisation de ces 3 paramètres :
Tout d’abord la partie « behind » appelante:
|
1 2 3 4 5 |
$scope.simple = 'Simple parameter'; $scope.myObject = { firstname: 'John', lastname: 'Doe' }; $scope.add = function() { alert('Hi ' + $scope.myObject.firstname); } |
La déclaration de la directive :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
angular.module('app') .directive('customDirective',CustomDirective); CustomDirective.$inject = ['$scope']; function CustomDirective($scope) { return { restrict:'E', scope: { firstParameter: '@', secondParameter: '=', method: '&thirdParameter' }, link: link }; function link() { //Affichera "Simple Parameter" dans la console; console.log($scope.simpleParameter); //Va modifier l'objet appelant $scope.secondParameter.firstname = 'Joe'; //Va appeler la méthode 'add' passé en paramètre dans appelant et // affichera donc une alert avec comme texte 'Hi Joe' $scope.add(); } } |
Et l’appel HTML
|
1 |
<custom-directive first-parameter="{{simple}}" second-parameter="myObject" third-parameter="add()"/> |
J’espère que cet exemple vous aura aider à comprendre toutes les possibilités qu’offre la communication avec les directives.
A savoir qu’il est également possible de transmettre des informations d’un composant à un autre à l’aide des événements. J’en parlerai dans un prochain billet. Il est néanmoins conseillé d’utiliser au maximum les paramètres dans un soucis de performance et de maintenabilité.