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

Question

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

<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

最好简单地使用 ng-subscribed 类，该类由 Angular 在表单提交时自动在表单上设置。

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

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);
                }
            })
        }
    };
});