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

时间:2016-03-10 11:27:38

标签: angularjs angularjs-directive angularjs-forms

我正在使用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。感谢。

1 个答案:

答案 0 :(得分:3)

如果你真的想要使用自己的指令,你可以只需要父表单控制器并手动标记$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);
            });
        }
    };
})