使用角度范围指令变量内容作为属性本身

Question

我无法在任何地方找到这个问题的答案，所以我会在这里问一下。有没有办法将Angular范围指令变量内容用作属性本身？

例如：

查看输入：

<custom-directive
    attr-one="Atribute value 1"
    ng-model="cool.model"
    message="Message 1"
    extra-attr="variable-attribute"
></custom-directive>

指令文件：

app.directive('customDirective', [
    function () {
        return {
            restrict: 'E',
            templateUrl: createuri('/templates/custom-directive'),
            require: 'ngModel',
            scope: {
                message: '@message',
                ngModel: '=ngModel',
                extraAttr: '@extraAttr',
                attrOne '@attrOne'
           }
        }
    }
]);

指令模板文件：

<input type="text"
    attr-one="attrOne"
    class="input-directive"
    ng-model="ngModel"
    message="message"
    {{extraAttr}} %{--something like this--}%
/>

输出最终会像这样结束：

<input type="text"
    attr-one="Atribute value 1"
    class="input-directive"
    ng-model="cool.model"
    message="Message 1"
    variable-attribute
/>

编辑：我不确定这是一个赋值错误，因为当我尝试使用一个有效的变量（{{label}}）时，例如，这就是我得到的：

变量在元素的内容区域内输出，但不在元素属性定义区域内输出。

Answer 1

如上所述： “Web浏览器有时会对他们认为对属性有效的值感到挑剔。”

Try to use ngAttr for this:

NG-ATTR标签= “{{yourLabelValue}}”

标签可以替换为任何属性名称，例如ng-attr-variable-attribute =“{{attributeValue}}”for“variable-attribute”。

Answer 2

我最终找到了答案，它包含使用编译指令函数，因为它在链接之前运行。

/*[...]*/
priority: 1001,
terminal: true,
compile: function(el, attr) {
    var ipt = el[0].childNodes[0].childNodes[1];
    /* ^ searching for the element I want to bind the directive attribute to*/
    ipt.setAttribute(attr.extraAttr, '');
    /* ^ setting the attribute to the value contained in extraAttr */
}
/*[...]*/