javascript - AngularJS：修改指令中的嵌入属性键

Question

鉴于：

<radio radio-name="login"></radio>

和指令：

app.directive('radio', function () {
    return {
        restrict: 'E',
        replace: true,
        transclude: true,
        scope: {
            radioName: '@'
        },
        template: '<label></label>',
        link: function ( ... ) {}
    }
});

我希望生成的标记是：

<label data-radio-name="login" ...>

而不是当前输出的内容：

<label radio-name="login" ...>

我想在初始标记上保留“radio-name”，这样您就可以知道它是一个自定义指令，但我希望生成的嵌入/替换具有语义数据属性“data-radio-name”。谢谢。

Answer 1

radioName将模式从更改@为=并将模板设置为空：

template: '<label data-radio-name=""></label>'

就像是：

.directive('radio', function () {
    return {
        restrict: 'E',
        replace: true,
        transclude: true,
        scope: {
            radioName: '='
        },
        template: '<label data-radio-name=""></label>',
        link: function ( ) {}
    }
});

输出：

<label data-radio-name="login"></label>

演示Fiddle