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

I'm trying to pass the $scope variable values to a custom directive as attribute, but it's not working.

我试图将$scope变量值作为属性传递给自定义指令，但它不起作用。

Here is the HTML code:

这里是HTML代码:

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

The directive is <check-list name={{q.id}}></check-list>, and here is the directive code :

该指令是，这里是指令码:

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

        }
    };
})

I'm logging the attribute attrs.name but the value I'm getting is "{{q.id}}" instead of the actual value of q.id

我在记录属性attr. name，但我得到的值是“{q”。id} "而不是q.id的实际值

4 个解决方案

#1

I suppose what you want to do is injecting scope object from controller to your directive. So you can define your directive as

我想你要做的是将scope对象从控制器注入到指令中。你可以把指令定义为

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

        }
    };
}

And in your view, you can reference your directive as

在你看来，你可以引用你的指令

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

#2

In directives, attributes are just strings.

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

In a template function, all you can do is use the string value of the attribute. If you want to use the evaluated or interpolated value of the attribute, you have a few options:

在模板函数中，您所能做的就是使用属性的字符串值。如果您想使用属性的计算值或插入值，您有以下几个选项:

1) Use an isolated scope

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) Inject $interpolate or $parse to evaluate the interpolation or expression manually in the link function

2)注入$插补或$parse，在link函数中手工计算插补或表达式

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) And finally, $parse

2)最后,$解析

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>

#3

I think you need to pass "q.id" instead of name={{q.id}} provided $scope.q.id is defined in your corresponding controller.

我认为你需要通过"q "。id”而不是名称= { {问。scope.q美元提供id } }。id在相应的控制器中定义。

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

#4

Or pass the entire scope to your 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
        }
    };
})

I recommend you pass only reference type as argument to your directive. Do not pass primitive types (q.id may be an integer). Pass question instead. It's all about how angularjs utilizes prototypical inheritance.

我建议您将仅引用类型作为参数传递给您的指令。不要传递原始类型(q)。id可能是一个整数)。通过问题来代替。这都是关于angularjs如何利用原型继承。

Scope is a complex topic in angularjs. See this: https://github.com/angular/angular.js/wiki/Understanding-Scopes

范围在英语中是一个复杂的话题。看到这个:https://github.com/angular/angular.js/wiki/Understanding-Scopes

#1