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

link函数有一个attrs变量，表示指令标记中的属性。您可以使用它并将数据插入必要的标记。但是如果没有范围变量，你将无法很好地进行2路绑定

AngularJS在指令中转换HTML属性

1 个答案: