Utilisation des symboles ‘@’, ‘&’, ‘=’ et ‘>’ dans la liaison de la directive personnalisée: AngularJS

J’ai beaucoup lu sur l’utilisation de ces symboles dans l’implémentation de directives personnalisées dans AngularJS mais le concept n’est toujours pas clair pour moi. Je veux dire, qu’est-ce que cela signifie si j’utilise l’une des valeurs de scope de la directive personnalisée?

Que faisons-nous exactement avec la scope ici?

Je ne suis pas sûr non plus que “scope: ‘>'” existe ou non dans la documentation officielle. Il a été utilisé dans mon projet.

Edit-1

L’utilisation de “scope: ‘>” était un problème dans mon projet et a été corrigé.

Dans une directive AngularJS, la scope vous permet d’accéder aux données dans les atsortingbuts de l’élément auquel la directive est appliquée.

Ceci est mieux illustré avec un exemple:

 

et la définition de la directive:

 angular.module('myModule', []) .directive('myCustomer', function() { return { ressortingct: 'E', scope: { customerName: '@name' }, controllerAs: 'vm', bindToController: true, controller: ['$http', function($http) { var vm = this; vm.doStuff = function(pane) { console.log(vm.customerName); }; }], link: function(scope, element, attrs) { console.log(scope.customerName); } }; }); 

Lorsque la propriété scope est utilisée, la directive se trouve dans le mode dit “scope isolée”, ce qui signifie qu’elle ne peut pas accéder directement à la scope du contrôleur parent.

En termes très simples, la signification des symboles de liaison est la suivante:

someObject: '=' (liaison de données bidirectionnelle)

someSsortingng: '@' (passé directement ou par interpolation avec des accolades à double accolade {{}} )

someExpression: '&' (par exemple hideDialog() )

Cette information est présente dans la page de documentation de la directive AngularJS , même si elle est quelque peu disséminée dans la page.

Le symbole > ne fait pas partie de la syntaxe.

Cependant, < existe dans le cadre des liaisons de composants AngularJS et signifie une liaison unidirectionnelle.

> n’est pas dans la documentation.

< est pour la liaison unidirectionnelle.

@ liaison @ est pour passer des chaînes. Ces chaînes prennent en charge les {{}} expressions pour les valeurs interpolées.

= liaison est pour la liaison de modèle bidirectionnelle. Le modèle dans la scope parent est lié au modèle dans la scope isolée de la directive.

& binding est utilisé pour passer une méthode dans le champ d'application de votre directive afin qu'elle puisse être appelée dans votre directive.

Lorsque nous définissons la scope: true in directive, Angular js va créer une nouvelle scope pour cette directive. Cela signifie que toute modification apscope à la scope de la directive ne sera pas répercutée dans le contrôleur parent.

<: reliure à sens unique

=: reliure bidirectionnelle

&: liaison de fonction

@: ne passe que des chaînes

Lorsque nous créons une directive client, le champ d’application de la directive peut être dans une scope isolée, cela signifie que la directive ne partage pas une scope avec le contrôleur; la directive et le contrôleur ont tous deux leur propre scope. Cependant, les données peuvent être transmises à la directive de trois manières différentes.

  1. Les données peuvent être transmises sous forme de chaîne à l’aide du littéral @ ssortingng, de la valeur de chaîne de transmission et de la liaison unidirectionnelle.
  2. Les données peuvent être transmises en tant qu’object en utilisant le littéral = ssortingng, l’object pass, 2 binding.
  3. Les données peuvent être transmises en tant que fonction, le littéral & ssortingng, qui appelle la fonction externe, peut transmettre des données de directive à contrôleur.

La documentation AngularJS sur les directives est plutôt bien écrite pour ce que signifient les symboles.

Pour être clair, vous ne pouvez pas simplement avoir

 scope: '@' 

dans une définition de directive. Vous devez avoir des propriétés pour lesquelles ces liaisons s’appliquent, comme dans:

 scope: { myProperty: '@' } 

Je vous suggère fortement de lire la documentation et les tutoriels sur le site. Il y a beaucoup plus d’informations à connaître sur les scopes isolées et d’autres sujets.

Voici une citation directe de la page ci-dessus, concernant les valeurs de la scope :

La propriété scope peut être vraie, un object ou une valeur de falsy:

  • Falsy : Aucune scope ne sera créée pour la directive. La directive utilisera la scope de son parent.

  • true : Une nouvelle étendue enfant héritant de manière prototype de son parent sera créée pour l’élément de la directive. Si plusieurs directives sur le même élément demandent une nouvelle étendue, une seule nouvelle étendue est créée. La nouvelle règle d’étendue ne s’applique pas à la racine du modèle car la racine du modèle reçoit toujours une nouvelle étendue.

  • {...} (un object haché) : Une nouvelle scope “isoler” est créée pour l’élément de la directive. La scope “isoler” diffère de la scope normale en ce sens qu’elle n’hérite pas de manière prototypique de sa scope parent. Ceci est utile lors de la création de composants réutilisables, qui ne doivent pas lire ou modifier accidentellement des données dans la scope parent.

Consulté le 13 février 2017 à l’ adresse https://code.angularjs.org/1.4.11/docs/api/ng/service/ $ comstack # -scope-, sous licence CC-by-SA 3.0.