Utilisation des symboles '@', '&', '=' et '>' dans la liaison de portée 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 portée de la directive personnalisée?

var mainApp = angular.module("mainApp", []);
mainApp.directive('modalView',function(){
  return{
     restrict:'E',
     scope:'@' OR scope:'&' OR scope:'=' OR scope:'>' OR scope:true
  }
});

Que faisons-nous exactement avec la portée ici?

Je ne sais pas non plus si "scope: '>'" existe ou non dans la documentation officielle. Il a été utilisé dans mon projet.

Modifier-1

L'utilisation de "scope: '>'" était un problème dans mon projet et il a été corrigé.

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

Ceci est mieux illustré par un exemple:

<div my-customer name="Customer XYZ"></div>

et la définition directive:

angular.module('myModule', [])
.directive('myCustomer', function() {
  return {
    restrict: '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 scopepropriété est utilisée, la directive est dans le mode dit "portée isolée", ce qui signifie qu'elle ne peut pas accéder directement à la portée du contrôleur parent.

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

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

someString: '@'(passé directement ou par interpolation avec notation double accolades {{}})

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

Ces informations sont présentes dans la page de documentation de la directive AngularJS , bien que quelque peu réparties sur toute 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 à sens unique.

> ne figure pas dans la documentation.

< est pour la liaison unidirectionnelle.

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

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

& binding est pour passer une méthode dans la portée de votre directive afin qu'elle puisse être appelée dans votre directive.

Lorsque nous définissons scope: true dans la directive, Angular js créera une nouvelle portée pour cette directive. Cela signifie que toute modification apportée à la portée de la directive ne sera pas reflétée dans le contrôleur parent.

< liaison unidirectionnelle

= liaison bidirectionnelle

& liaison de fonction

@ passer uniquement des chaînes

Lorsque nous créons une directive client, la portée de la directive pourrait être dans une portée isolée, cela signifie que la directive ne partage pas une portée avec le responsable du traitement; la directive et le contrôleur ont leur propre champ d'application. Cependant, les données peuvent être transmises au champ d'application de la directive de trois manières possibles.

1. Les données peuvent être passées sous forme de chaîne à l'aide du @littéral de chaîne, passer la valeur de chaîne, liaison à sens unique.
2. Les données peuvent être passées en tant qu'objet à l'aide de la =chaîne littérale, passer l'objet, liaison de 2 manières.
3. Les données peuvent être passées en tant que fonction, le &littéral de chaîne, appelle une fonction externe, peut transmettre des données de la directive au contrôleur.

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

Pour être clair, vous ne pouvez pas simplement avoir

scope: '@'

dans une définition 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. Vous devez connaître beaucoup plus d'informations sur les étendues isolées et d'autres sujets.

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

La propriété scope peut être true, un objet ou une valeur falsifiée:

• falsy : aucune portée ne sera créée pour la directive. La directive utilisera la portée de son parent.

• true: Une nouvelle portée enfant qui hérite de manière prototypique 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 portée, une seule nouvelle portée est créée. La nouvelle règle de portée ne s'applique pas à la racine du modèle car la racine du modèle obtient toujours une nouvelle portée.

• {...} (un hachage d'objet) : une nouvelle portée "isoler" est créée pour l'élément de la directive. La portée 'isolate' diffère de la portée normale en ce qu'elle n'hérite pas de manière prototypique de sa portée 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 portée parent.

^{Récupéré le 13/02/2017 sur https://code.angularjs.org/1.4.11/docs/api/ng/service/ $ compile # -scope-, sous licence CC-by-SA 3.0}

J'ai eu du mal à lier une valeur avec l'un des symboles dans AngularJS 1.6. Je n'ai obtenu aucune valeur du tout, seulement undefined, même si je l'ai fait exactement de la même manière que d'autres liaisons dans le même fichier qui fonctionnaient.

Le problème était: mon nom de variable avait un trait de soulignement.

Cela échoue:

bindings: { import_nr: '='}

Cela marche:

bindings: { importnr: '='}

(Pas complètement lié à la question d'origine, mais c'était l'un des meilleurs résultats de recherche lorsque j'ai regardé, alors j'espère que cela aide quelqu'un avec le même problème.)