Question

我试图将$ 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的实际值

Answer 1

我想你想要做的是从控制器向你的指令注入范围对象。因此，您可以将指令定义为

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>

Answer 2

在指令中，属性只是字符串。

在模板函数中，您所能做的就是使用属性的字符串值。如果要使用属性的求值或插值，可以选择以下几个选项：

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>

Answer 3

我认为你需要传递“q.id”而不是name = {{q.id}}，前提是$ scope.q.id在相应的控制器中定义。

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

Answer 4

或者将整个范围传递给您的指令：

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

AngularJS：将$ scope变量作为指令属性传递

4 个答案: