我正在尝试构建一个不使用<input type="checkbox">
. 它应该按预期工作;更新模型应该更新视图,单击框应该更新模型,它应该听required
指令(验证应该起作用)。
我目前有以下指令,完全按预期工作:
'use strict';
angular.module('directives.checkbox', [])
.directive('checkbox', [function () {
return {
restrict: 'A',
require: 'ngModel',
replace: true,
template: '<span class="checkbox"></span>',
link: function (scope, elem, attrs, ctrl) {
elem.bind('click', function () {
scope.$apply(function () {
elem.toggleClass('checked');
ctrl.$setViewValue(elem.hasClass('checked'));
});
});
ctrl.$render = function () {
if (!elem.hasClass('checked') && ctrl.$viewValue) {
elem.addClass('checked');
} else if (elem.hasClass('checked') && !ctrl.$viewValue) {
elem.removeClass('checked');
}
};
}
}
}]);
它只是一个<span>
带有一个 CSS 类checkbox
和另一个checked
用于选中状态的 CSS 类。但是,使用 jQuery 来切换类并像我一样更新视图似乎不太像 Angular(或最佳实践)。我宁愿使用ng-class
andng-click
指令,但这意味着我需要使用隔离范围(以避免在同一页面上使用多个复选框时范围状态冲突)。出于某种原因,孤立的范围使角度停止调用$render()
。ctrl
有谁知道这是否是正确的方法,或者是否有一种更像角度的方法仍然可以解决我的要求?