[英]styling checkbox with angular directive
I am trying to style an input type='checkbox' with an angular directive and my HTML layout looks like this 我正在尝试使用angular指令设置输入type ='checkbox'的样式,并且我的HTML布局看起来像这样
<div class="checkbox"><input type="checkbox" ng-model="checked1" /></div>
<div class="checkbox"><input type="checkbox" ng-model="checked2" /></div>
<div class="checkbox"><input type="checkbox" ng-model="checked3" /></div>
My directive so far looks like this: 到目前为止,我的指令如下所示:
myApp.directive('checkbox', function($parse) {
return {
restrict: "C",
compile: function(elem, attr) {
var model = $parse(attr.ngModel);
return function(scope, elem, attr) {
var toggleValue = function() {
scope.$apply(function(scope) {
model.assign(scope, !model(scope));
});
};
var updateComponent = function(value) {
if(value == true)
elem.addClass('checkbox-active');
else
elem.removeClass('checkbox-active');
};
elem.bind('click', toggleValue);
scope.$watch(model, updateComponent);
};
}
}
});
The problem with this directive is that it searched the ng-model from the not from the input inside the div so it would work if I had the layout like this 该指令的问题在于它从div内的输入中而不是ng中搜索ng-model,因此如果我具有这样的布局,它将可以正常工作
<div class="checkbox" ng-model="checked1"><input type="checkbox" /></div>
Can I change something into the compile of the directive so I make it read the ng-model from the input rather than from the div ? 我可以将某些内容更改为指令的编译内容,以便使其从输入而不是从div读取ng-model吗?
You do not need to read the ng-model attribute directly like that, ngModel exposes an api via ngModelCtrl. 您不需要像这样直接读取ng-model属性,ngModel通过ngModelCtrl公开一个api。 Your directive can do this 您的指令可以做到这一点
require: "ngModel",
and then in the link function, the ngModelController will be available 然后在链接函数中,可以使用ngModelController
link: function(scope, elem, attrs, ngModelCtrl) {
In the link function you could check the state of the model and add/remove classes accordingly. 在链接功能中,您可以检查模型的状态并相应地添加/删除类。 You might also be able to just use ngClass and not even use a custom directive. 您也许也可以只使用ngClass甚至不使用自定义指令。
The docs for ngModelController are here: https://docs.angularjs.org/api/ng/type/ngModel.NgModelController ngModelController的文档在这里: https ://docs.angularjs.org/api/ng/type/ngModel.NgModelController
As for why it is being applied to the div and not the checkbox? 至于为什么将它应用于div而不是复选框? You have class="checkbox" on the div. 您在div上有class =“ checkbox”。 That is what is activating your directive. 那就是激活您的指令的原因。 Move the class="checkbox" to the input. 将class =“ checkbox”移至输入。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.