Question

在提交表单时，我使用ng-class将submitted类添加到我的输入中

<form name="myform" novalidate>
<input name= "input1" ng-class="{'submitted':myform.$submitted}" ng-model=data.input1/>
.....
....
</form>

虽然它完成了工作，但它太冗长了，而且我需要很多输入。我想创建一个指令，使我的HTML看起来像

<form name="myform" novalidate>
<input name= "input1" set-submitted ng-model=data.input1/>
.....
....
</form>

如何为此目的创建指令？

Answer 1

最好简单地使用表单提交时Angular在表单上自动设置的ng-submitted类。

但是出于学术目的，这里有一个简单的指令来设置元素本身的类：

app.directive('setSubmitted', function() {
    return {
        require: '^form',
        link: function(scope, element, attrs, ngFormController) {
            scope.$watch(function() { 
                return ngFormController.$submitted;
            }, function(newVal, oldVal) {
                if (newVal !== oldVal) {
                    element.toggleClass('submitted', newVal);
                }
            })
        }
    };
});

Angularjs指令添加一个类以在表单的提交事件上形成输入

1 个答案: