AngularJS在指令内部包含HTML属性

Question

我有一条指令：

.directive("radio", function () {
        return {
            restrict: "EA",
            replace: true,
            scope: { text: "@", name: "@", value: "&" },
            template: '<label class="radio" for="{{name}}">\
                    <span class="icons">\
                        <span class="first-icon fui-radio-unchecked"></span>\
                        <span class="second-icon fui-radio-checked"></span>\
                    </span>\
                    <input type="radio" id="{{name}}" name="{{name}}" value="{{value}}" ng-model="value" />\
                    <span ng-bind="text"></span>\
                </label>',
            link: function (scope, el) {
                scope.value = false;
                scope.$watch("value", function (value) {
                    value ? el.addClass("checked") : el.removeClass("checked");
                });
            }
        };
    })

现在我像这样使用它：

<radio name="test" value="testvalue"></radio>

我不想每次都想添加东西时都必须添加作用域变量，如果可以的话，那会很好：

<radio id="{{name}}" name="{{name}}" value="{{value}}" ng-model="value" required></radio>

并且产生的HTML将是：

<label class="radio" for="{{name}}">
    <span class="icons">
        <span class="first-icon fui-radio-unchecked"></span>
        <span class="second-icon fui-radio-checked"></span>
    </span>
    <input type="radio" id="{{name}}" name="{{name}}" value="{{value}}" ng-model="value" required />
        <span ng-bind="text"></span>
</label>

Answer 1

链接函数具有一个attrs变量，该变量表示指令标记中的属性。 您可以使用它并将数据插入必要的标签。 但是如果没有作用域变量，您将无法很好地进行2way绑定