Question

我正在使用Angular 1.5.1。我的表单上有一个复选框。我不关心选中/取消选中复选框的真/假指示，所以我不想要ng-model。我关心的是：

取消选中复选框时，我会删除模型中的特定数组
选中复选框后，我将一个空数组添加回我的模型

所以我创建了一个指令，为我提供了这个功能，非常简单：

.directive('cbOnChecked', function() {
    return {
        restrict: 'A',
        link: function(scope, element, attr) {
            element.on('click', function(event) {
                if(element[0].checked)
                    scope.$apply(attr.cbOnChecked);
            });
        }
    };
})

.directive('cbOnUnchecked', function() {
    return {
        restrict: 'A',
        link: function(scope, element, attr) {
            element.on('click', function(event) {
                if(!element[0].checked)
                    scope.$apply(attr.cbOnUnchecked);
            });
        }
    };
})

现在我可以这样做：

<input type="checkbox" cb-on-checked="counter = counter + 1" cb-on-unchecked="counter = counter - 1"/>

或者

<input type="checkbox" cb-on-checked="deleteUserList()" cb-on-unchecked="users = []"/> No users<br/>

问题是 - 如果复选框上没有$dirty，则复选框所在的表单不会被标记为ng-model。有没有办法解决这个问题？ Here是一个例子js-fiddle。感谢。

Answer 1

如果你真的想要使用自己的指令，你可以只需要父表单控制器并手动标记$dirty：

.directive('cbOnChecked', function() {
    return {
        require: '^form',
        restrict: 'A',
        link: function(scope, element, attr, ngFormController) {
            element.on('click', function(event) {
              ngFormController.$setDirty();
              if(element[0].checked)
                scope.$apply(attr.cbOnChecked);
            });
        }
    };
})

Angularjs指令在没有ng-model的情况下使表单变脏

1 个答案: