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" ...>

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

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