Question

我正在尝试使用angular指令设置输入类型='复选框'的样式，我的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",

然后在link函数中，ngModelController将可用

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

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

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

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

带角度指令的样式复选框

1 个答案: