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綁定