web-dev-qa-db-fra.com

AngularJS: passer la variable $ scope comme attribut de directive

J'essaie de passer les valeurs de la variable $ scope à une directive personnalisée en tant qu'attribut, mais cela ne fonctionne pas.

Voici le code HTML:

<ul ng-repeat="q in questions">
        <li>
            {{q.question}} 
            <check-list name="{{q.id}}"></check-list>
        </li>
</ul>

La directive est <check-list name={{q.id}}></check-list>, et voici le code de la directive:

    app.directive('checkList',function(){
    return {
        restrict:'E',
        template: function(elem,attrs){
            console.log(attrs.name);
            return '</br> <input type="radio" /> Yes </br> <input type="radio" /> No'
        },
        link:function(scope,elem,attrs){

        }
    };
})

J'enregistre l'attribut attrs.name mais la valeur que j'obtiens est "{{q.id}}" au lieu de la valeur réelle de q.id

javascriptangularjsangularjs-directiveangularjs-ng-repeat
13
iJade

Je suppose que ce que vous voulez faire est d'injecter un objet scope depuis le contrôleur vers votre directive. Vous pouvez donc définir votre directive comme

app.directive('checkList',function(){
    return {
        restrict:'E',
        scope: {
          name: "="
        }
        template: '{{name}}</br> <input type="radio" /> Yes </br> <input type="radio" /> No',
        link:function(scope,elem,attrs){

        }
    };
}

Et selon vous, vous pouvez référencer votre directive comme

<check-list name="q.id"></check-list>
19
Rebornix

Dans les directives, les attributs ne sont que des chaînes.

Dans une fonction de modèle, tout ce que vous pouvez faire est d'utiliser la valeur de chaîne de l'attribut. Si vous souhaitez utiliser la valeur évaluée ou interpolée de l'attribut, vous avez quelques options:

1) Utilisez un oscilloscope isolé

app.directive('checkList', function() {
    return {
        restrict:'E',
        scope: {
            name: '&'
        }
        template: '</br> <input type="radio" /> Yes </br>{{name()}} <input type="radio" /> No'
        link: function(scope, elem, attrs) {

        }
    };
});

<ul ng-repeat="q in questions">
        <li>
            {{q.question}} 
            <check-list name="q.id"></check-list>
        </li>
</ul>

2) Injectez $ interpolate ou $ parse pour évaluer manuellement l'interpolation ou l'expression dans la fonction de lien

app.directive('checkList', function($interpolate) {
    return {
        restrict:'E',
        template: '</br> <input type="radio" /> Yes </br>{{name}} <input type="radio" /> No'
        link:function(scope,elem,attrs){
            scope.name = $interpolate(attrs.name)(scope);
        }
    };
});

<ul ng-repeat="q in questions">
        <li>
            {{q.question}} 
            <check-list name="{{q.id}}"></check-list>
        </li>
</ul>

2a) Et enfin, $ parse

app.directive('checkList',function($parse){
    return {
        restrict:'E',
        template: '</br> <input type="radio" /> Yes </br>{{name}} <input type="radio" /> No'
        link:function(scope,elem,attrs){
            scope.name = $parse(attrs.name)(scope);
        }
    };
});

<ul ng-repeat="q in questions">
        <li>
            {{q.question}} 
            <check-list name="q.id"></check-list>
        </li>
</ul>
9
Joe Enzminger

Je pense que vous devez passer "q.id" au lieu de name = {{q.id}} à condition que $ scope.q.id soit défini dans votre contrôleur correspondant.

 <check-list name="q.id"></check-list>
2
MaheshMG

Ou passez tout le champ d'application à votre directive:

app.directive('checkList',function(){
    return {
        restrict:'E',
        scope: true, //scope
        template: function(elem,attrs){
            console.log(attrs.name);
            return '</br> <input type="radio" /> Yes </br> <input type="radio" /> No'
        },
        link:function(scope,elem,attrs){
           var question = scope.q; //get your question here
        }
    };
})

Je vous recommande de ne passer que le type de référence comme argument à votre directive. Ne passez pas de types primitifs (q.id peut être un entier). Passez question à la place. Tout dépend de la manière dont angularjs utilise l'héritage prototypique.

Scope est un sujet complexe dans angularjs. Voir ceci: https://github.com/angular/angular.js/wiki/Understanding-Scopes

2
roland