web-dev-qa-db-fra.com

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

J'ai beaucoup lu 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. 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 suis pas sûr non plus que "scope: '>'" existe dans la documentation officielle ou non. Il a été utilisé dans mon projet.

Edit-1

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

angularjsangularjs-directiveangularjs-scope
139
MAC

Dans une directive AngularJS, la portée vous permet d’accéder aux données des 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 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 la propriété scope est utilisée, la directive est dans le mode dit "scope isolé", 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 à double accolade {{}})

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

Cette information est présente dans le page de documentation de la directive AngularJS , bien qu’elle soit quelque peu dispersée sur toute la page.

Le symbole > ne fait pas partie de la syntaxe.

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

112
VRPF

> n'est pas dans la documentation.

< est pour une liaison à sens unique.

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

La liaison = est destinée à la liaison de modèle bidirectionnelle. Le modèle dans la portée parente est lié au modèle dans la portée isolée de la directive.

& La liaison sert à transmettre une méthode à la portée de votre directive afin qu'elle puisse être appelée dans votre directive.

Lorsque nous définissons la portée: 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.

162
Aravind

< liaison unidirectionnelle

= liaison bidirectionnelle

& liaison de fonction

@ ne passe que des chaînes

35
Timothy.Li

Lorsque nous créons une directive client, le champ d'application de la directive peut être un champ isolé, cela signifie que la directive ne partage pas un champ d'application avec le contrôleur. la directive et le contrôleur ont chacun 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 transmises sous forme de chaîne à l'aide du littéral chaîne @, de la valeur de chaîne de transmission, d'une liaison unidirectionnelle.
  2. Les données peuvent être transmises en tant qu'objet à l'aide de la chaîne littérale =, objet pass, liaison de 2 manières.
  3. Les données peuvent être transmises sous forme de fonction. Le littéral de chaîne & appelle une fonction externe et peut transmettre des données de la directive à l'automate.
3
Bac Nguyen

Le documentation AngularJS sur les directives est assez bien écrit 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. Vous devez savoir 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 de fausseté:

  • falsy : aucune étendue 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 d'étendue ne s'applique pas à la racine du modèle car celle-ci obtient toujours une nouvelle étendue.

  • {...} (un hachage d'objet) : une nouvelle portée "isoler" est créée pour l'élément de la directive. La portée "isoler" diffère de la portée normale en ce sens 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 accidentellement lire ou modifier des données dans la portée parente.

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

2
Heretic Monkey