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

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

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

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

Answer 2

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

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 3

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

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

Answer 4

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

在模板函数中，您所能做的就是使用属性的字符串值。如果你想使用属性的评估值或内插值，你有几个选择：

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 以在 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) 最后，$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>

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

AngularJS : Pass $scope variable as directive attribute

javascript

angularjs

angularjs-directive

angularjs-ng-repeat