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

Question

我正在使用 Angular 1.5.1。我的表格上有一个复选框。我不关心复选框的 truth/false 指示符是 checked/unchecked，所以我不想在它上面使用 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/>

问题是 - 如果复选框上没有 ng-model，则复选框所在的表单不会被标记为 $dirty。有什么解决办法吗？
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 的情况下使表单变脏

Angularjs directive to make form dirty without ng-model

angularjs

angularjs-directive

angularjs-forms