Javascript 将attrs指令放入模板中。安格拉斯

我有下一个代码：

appForm.directive('inputRadio', function(){
    return {
        restrict: 'E',
        link: function (scope, elem, attrs){

        },
        compile: function(elem, attrs){
            return {
                pre: function preLink( scope, elem, attrs ) {

                },
                post: function postLink( scope, elem, attrs ) {

                }
            }
        },
        template: '' +
        '<div class="radio">' +
        '<label class="required"><input type="radio" id="attrs.twigId" name="attrs.twigName" ng-model="optionMultipleChoice" ng-required="required" value="attrs.twigValue" >attrs.twigLabel</label> ' +
        '</div>'
    }
});

appForm.directive（'inputRadio'，function（）{
返回{
限制：'E'，
链接：功能（范围、要素、属性）{
},
编译：函数（元素、属性）{
返回{
前置：功能预链接（范围、要素、属性）{
},
post：功能postLink（范围、元素、属性）{
}
}
},
模板：“”+
'' +
“attrs.twigLabel”+
''
}
});

我想将包含变量“attrs”的属性直接放入模板中，例如id=“attrs.twigid”。不是很好如何做，如果你在编译或链接中做

谢谢大家!

编辑：

appForm.directive（'inputRadio'，function（）{
返回{
限制：'E'，
链接：功能（范围、要素、属性）{
},
编译：函数（元素、属性）{
返回{
前置：功能预链接（范围、要素、属性）{
scope.varstwig=attrs；
},
post：功能postLink（范围、元素、属性）{
}
}
},
模板：“”+
'' +
“[[varstwig.twiglabel]]+
''
}
});

这段代码可以工作，但它有一个bug，如果多个指令实例“scope”将被覆盖，因此所有指令都具有相同的值

有人知道如何解决这个问题吗

电话如下：

{% block _test_optionsExpanded_widget %}
    <div class="form-group">
        <label class="control-label required">Options expanded</label>
        <div id="test_optionsExpanded">
            {% for option in form.children %}
                <input_radio twigId="{{ option.vars.id }}" twigName="{{ option.vars.full_name }}" twigValue="{{ option.vars.value }}" twigLabel="{{ option.vars.label }}" twigShortName="{{ option.vars.name }}"></input_radio>
            {% endfor %}
        </div>
    </div>
{% endblock %}

{%block\u test\u options expanded\u widget%}
选项扩大
{form.children%%中的选项为%s}
{%endfor%}
{%endblock%}

如果我理解正确，您希望删除在HTML元素中设置的一些属性。只需隔离范围

appForm.directive('inputRadio', function(){
    return {
    restrict: 'E',
    scope: {
       twigId : "=",
       twigName: "=",
       twigValue: "=",
       twigLabel: "="
    },
    link: function (scope, elem, attrs){

    },
    compile: function(elem, attrs){
        return {
            pre: function preLink( scope, elem, attrs ) {

            },
            post: function postLink( scope, elem, attrs ) {

            }
        }
    },
    template: '' +
    '<div class="radio">' +
    '<label class="required"><input type="radio" id="{{twigId}}" name="{{twigName}}" ng-model="twigValue" ng-required="required" >{{twigLabel}}</label> ' +
    '</div>'
}
});

appForm.directive（'inputRadio'，function（）{
返回{
限制：'E'，
范围：{
twigId:“=”，
twigName:“=”，
twigValue:“=”，
twigLabel:“=”
},
链接：功能（范围、要素、属性）{
},
编译：函数（元素、属性）{
返回{
前置：功能预链接（范围、要素、属性）{
},
post：功能postLink（范围、元素、属性）{
}
}
},
模板：“”+
'' +
“{{twigLabel}}”+
''
}
});

这样的办法应该行得通。你可能得检查一下那台收音机的参数。我不知道你想做什么

注意twigValue中的“=”和其他有特定含义

如果属性绑定到父范围中其他位置的变量，请使用“=”；如果属性只是一个值，请使用“@”

---

我找到了解决办法。。哈哈

如果我将变量范围定义为“@”，它不会被覆盖，并且每个指令都有特定的值​​小枝给的

谢谢大家：）

appForm.directive（'inputRadio'，function（）{
返回{
限制：'E'，
范围：{
瓦斯特维格：“@”
},
链接：功能（范围、要素、属性）{
},
编译：函数（元素、属性）{
返回{
前置：功能预链接（范围、要素、属性）{
scope.varstwig=attrs；
},
post：功能postLink（范围、元素、属性）{
}
}
},
模板：“”+
'' +
“[[varstwig.twiglabel]]+
''
}
});

模板将只反映添加到范围中的属性。在你的链接函数中，你可以说scope.twigId=attrs.twigId，然后在你的模板中引用just twigId。我使用[[]，因为我使用twig。我有一个问题，如果放几个指令，范围将被覆盖。然后你必须查看独立的范围，看看下面的答案，这不是我想要的，对不起，我修改了帖子以便更好地理解我想要什么。我真的不知道你想做什么。但您使用的是非隔离作用域，因此该作用域将被覆盖。由于您的变量是来自twig的静态变量，您可能应该有一个带“@”的值绑定。没错！谢谢

appForm.directive('inputRadio', function(){
    return {
    restrict: 'E',
    scope: {
       twigId : "=",
       twigName: "=",
       twigValue: "=",
       twigLabel: "="
    },
    link: function (scope, elem, attrs){

    },
    compile: function(elem, attrs){
        return {
            pre: function preLink( scope, elem, attrs ) {

            },
            post: function postLink( scope, elem, attrs ) {

            }
        }
    },
    template: '' +
    '<div class="radio">' +
    '<label class="required"><input type="radio" id="{{twigId}}" name="{{twigName}}" ng-model="twigValue" ng-required="required" >{{twigLabel}}</label> ' +
    '</div>'
}
});

appForm.directive('inputRadio', function(){
        return {
            restrict: 'E',
            scope: {
                varstwig: '@'
            },
            link: function (scope, elem, attrs){

            },
            compile: function(elem, attrs){
                return {
                    pre: function preLink( scope, elem, attrs ) {
                        scope.varstwig = attrs;
                    },
                    post: function postLink( scope, elem, attrs ) {

                    }
                }
            },
            template: '' +
            '<div class="radio">' +
            '<label class="required"><input type="radio" id="[[ varstwig.twigid ]]" name="[[ varstwig.twigname ]]" ng-model="optionMultipleChoice" ng-required="required" value="[[ varstwig.twigvalue ]]" >[[ varstwig.twiglabel ]]</label> ' +
            '</div>'
        }
    });