web-dev-qa-db-fra.com

Attributs de portée de directive sans portée isolée dans AngularJS

Existe-t-il un moyen d'hériter de la portée parent en étendant avec les attributs passés?

Je veux passer des paramètres à une directive réutilisable directement à partir du modèle sans avoir à modifier le DOM dans la fonction de liaison.

Par exemple:

<form-input icon="icon-email" label="email" ng-model="data.input"></form-input>

Pour une directive comme celle-ci:

    <div class="form-group">
      <label>{{label}}</label>
      <div class="input-group">
        <div class="{{icon}}">@</div>
        <input class="form-control" placeholder="Email" ng-model="mail.email">
      </div>
    </div>

ng-model est dans la portée parent, contrôlant un formulaire entier dans ce cas, mais je ne pense pas qu'il soit nécessaire de stocker les attributs de style dans le contrôleur.

Existe-t-il un moyen de transmettre des paramètres directement dans le modèle sans créer de portée isolée?

angularjsangularjs-directiveangularjs-scope
23
BarakChamo

Vous ne pourriez pas "étendre" la portée parent en tant que telle. Cependant, votre objectif peut être atteint en utilisant les attributs de balise de directive qui sont injectés dans la fonction de lien de votre directive.

Donc par exemple. pour attacher votre variable label, la fonction de lien de votre directive devrait ressembler à ci-dessous:

 link: function ($scope, $element, $attributes) {
         $scope.label = $scope.$eval($attributes.label);
        }


Vous pouvez consulter le plongeur ci-dessous pour une démonstration en direct.
http://plnkr.co/edit/2qMgJSSlDyU6VwdUoYB7?p=preview

29
Angad

réponse d'Angad fonctionnera pour la liaison statique, mais si la valeur de l'attribut peut changer après la liaison, cela ne sera pas mis à jour. Si vous en avez besoin, la solution serait de passer la valeur sous forme de chaîne au lieu de référence:

<form-input icon="icon-email" label="{{email}}" ng-model="data.input"></form-input>

Dans la directive, ajoutez un $ observe sur l'attribut pour mettre à jour la variable scope:

$attributes.$observe('label', function(newValue){$scope.label=newValue});

Maintenant, la variable de portée changera dynamiquement si la valeur d'attribut change.

8
awe