javascript - 如何将一些模板应用于 AngularJS 中复选框和单选框的所有输入类型？

Question

我编写了一些指令来将模板应用于复选框和单选框。但需要给元素添加类或属性。

.directive('checkbox', function () {
            return {
                restrict: 'C',
                link: function (scope, elem, attrs) {
                    elem.wrap('<span class="check"></span>');
                    elem.after('<span class="checkLtr"></span>');
                }
            };
        })

如何在不添加/更改元素、类或属性的情况下添加此模板？

Answer 1

您可以让您的指令替换复选框元素，这样就可以代替

<input type="checkbox" class="checkbox">

你有

<my-checkbox />

你的指令代码看起来像这样

.directive('myCheckbox', function () {
    return {
        restrict: 'E',
        template: '<span class="check"><input type="checkbox"></span><span class="checkLtr"></span>',
        replace: true,
        link: function (scope, elem, attrs) {
        }
    };
})

如果需要，您可以使用隔离范围绑定(bind)“检查”值并在链接函数中操作它。