javascript - 带有 Angular Directive(指令)的样式复选框

Question

我正在尝试使用 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>

到目前为止我的指令如下所示:

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);
            };
        }
    }
});

这个指令的问题是它从 div 内的输入而不是从输入中搜索 ng-model，所以如果我有这样的布局它就会工作

<div class="checkbox" ng-model="checked1"><input type="checkbox" /></div>

我可以对指令的编译进行一些更改，以便让它从输入而不是 div 中读取 ng-model 吗？

Answer 1

你不需要像这样直接读取 ng-model 属性，ngModel 通过 ngModelCtrl 公开一个 api。您的指令可以做到这一点

require: "ngModel",

然后在链接函数中，ngModelController将可用

link: function(scope, elem, attrs, ngModelCtrl) {

在链接功能中，您可以检查模型的状态并相应地添加/删除类。您也可以只使用 ngClass，甚至不使用自定义指令。

ngModelController 的文档位于:https://docs.angularjs.org/api/ng/type/ngModel.NgModelController

至于为什么它被应用于 div 而不是复选框？ div 上有 class="checkbox"。这就是激活你的指令的原因。将 class="checkbox"移至输入。