我正在尝试使用angular指令设置一个复选框,我想出了一个简单的解决方案。我的想法是在HTML中输入这样的输入
<input type="checkbox" class="checkbox" ng-model="abc1"/>
我希望创建一个指令,它实际上将此输入包含在带有类检查的标签内,并在输入后添加一个div,这样我就可以在输入之后使用+从CSS中设置div并设计其中的状态输入
所以我的指令应该将我的HTML转换为我之前的HTML
<label class="check">
<input type="checkbox" class="checkbox" ng-model="abc1"/>
<div></div>
</label>
现在我创建了这个指令
.directive('checkbox', function() {
return {
restrict: 'C',
transclude: true,
template: '<label><ng-transclude></ng-transclude><div></div></label>',
link: function(scope, elem, attrs) {
}
};
})
但它没有做我想要实现的布局,我希望有人可以帮我展示编写指令的方法,以便将其转换为HTML输出。
答案 0 :(得分:2)
以下指令将包装input元素以实现所需的HTML结构。如果包装器div是严格结构的并且不包含任何指令,那么我认为可以这样做。
app.directive('checkbox', function() {
return {
restrict: 'C',
link: function (scope, elem, attrs) {
elem.wrap('<div class="check"></div>');
elem.after('<div></div>');
}
};
});
这是Plunk