web-dev-qa-db-ja.com

AngularJS：$ scope変数をディレクティブ属性として渡します

$ scope変数の値を属性としてカスタムディレクティブに渡そうとしていますが、機能しません。

HTMLコードは次のとおりです。

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

ディレクティブは<check-list name={{q.id}}></check-list>で、ここにディレクティブコードがあります：

    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){

        }
    };
})

属性attrs.nameを記録していますが、取得している値は"{{q.id}}"の実際の値ではなくq.idです

javascriptangularjsangularjs-directiveangularjs-ng-repeat
13
iJade

あなたがしたいことは、コントローラからディレクティブにスコープオブジェクトを注入することだと思います。したがって、ディレクティブを次のように定義できます。

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){

        }
    };
}

そして、あなたのビューでは、ディレクティブを次のように参照できます

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

ディレクティブでは、属性は単なる文字列です。

テンプレート関数でできることは、属性の文字列値を使用することだけです。属性の評価値または補間値を使用する場合、いくつかのオプションがあります。

1）分離されたスコープを使用する

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）リンク関数で補間または式を手動で評価するために、$ interpolateまたは$ parseを挿入します

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）最後に、$ 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

$ scope.q.idが対応するコントローラーで定義されている場合、name = {{q.id}}の代わりに「q.id」を渡す必要があると思います。

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

または、スコープ全体をディレクティブに渡します。

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
        }
    };
})

ディレクティブへの引数として参照型のみを渡すことをお勧めします。プリミティブ型（q.idは整数の場合があります）。代わりにquestionを渡します。これは、angularjsがプロトタイプ継承をどのように利用するかに関するすべてです。

Scopeは、angularjsの複雑なトピックです。これを参照してください： https://github.com/angular/angular.js/wiki/Understanding-Scopes

2
roland