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

Question

J'ai lu beaucoup de choses sur l'utilisation de ces symboles dans la mise en œuvre de directives personnalisées dans AngularJS, mais le concept n'est toujours pas clair pour moi.

Qu'est-ce que cela signifie si j'utilise une des valeurs de la portée dans 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 suis pas non plus certain que "scope:'>'" existe dans la documentation officielle ou non. Il a été utilisé dans mon projet. (L'utilisation de "scope:'>'" était un problème dans mon projet et il a été corrigé).

Answer 1

> ne figure pas dans la documentation.

< est pour la liaison unidirectionnelle.

@ sert à transmettre des chaînes de caractères. Ces chaînes supportent {{}} des expressions pour les valeurs interpolées.

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

& permet de faire 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 une directive, Angular js va créer une nouvelle portée pour cette directive. Cela signifie que toute modification apportée à la portée de la directive ne sera pas répercutée dans le contrôleur parent.

Answer 2

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

La meilleure façon de l'illustrer est de prendre un exemple :

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

et la définition de la 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 le scope est utilisée, la directive est en mode "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 la suivante :

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

someString: '@' (transmis directement ou par interpolation avec la notation entre accolades doubles {{}} )

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

Cette information est présente dans le Page de documentation sur les directives AngularJS bien qu'elle soit quelque peu répartie sur la page.

Le symbole > ne fait pas partie de la syntaxe.

Cependant, < existe dans le cadre de la Liaisons de composants AngularJS et signifie une liaison à sens unique.

Answer 3

< liaison unidirectionnelle

= liaison bidirectionnelle

& fonction de liaison

@ transmettre uniquement des chaînes de caractères

Answer 4

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

1. Les données peuvent être transmises sous forme de chaîne à l'aide de la fonction @ chaîne littérale, valeur de la chaîne passée, liaison unidirectionnelle.
2. Les données peuvent être transmises sous forme d'objet à l'aide de la fonction = string literal, pass object, 2 ways binding.
3. Les données peuvent être transmises en tant que fonction le & chaîne littérale, appelle une fonction externe, peut passer des données de la directive au contrôleur.

Answer 5

El Documentation AngularJS sur les directives est plutôt bien écrit pour ce que les symboles signifient.

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 conseille vivement de lire la documentation et les tutoriels sur le site. Il y a beaucoup plus d'informations que vous devez savoir sur les scopes isolés et d'autres sujets.

Voici une citation directe de la page susmentionnée, concernant les valeurs de l'Union européenne. scope :

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

• 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 prototypiquement 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 règle de la nouvelle portée ne s'applique pas à la racine du modèle, puisque la racine du modèle reçoit toujours une nouvelle portée.

• {...} (un hachage d'objet) : Une nouvelle portée "isolate" 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 prototypiquement de sa portée parent. Ceci est utile lors de la création de composants réutilisables, qui ne doivent pas accidentellement lire ou modifier des données dans la portée parent.

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