var rcsubmitdirective = {
'rcsubmit': function ($parse) {
return {
restrict: "a",
require: [ "rcsubmit", "?form" ],
controller: function() {
this.attempted = false;
var formcontroller = null;
this.setattempted = function() {
this.attempted = true;
};
this.setformcontroller = function(controller) {
formcontroller = controller;
this.needsattention = function(fieldmodelcontroller) {
if (!formcontroller) return false;
if (fieldmodelcontroller) {
return fieldmodelcontroller.$invalid && (fieldmodelcontroller.$dirty || this.attempted);
} else {
return formcontroller && formcontroller.$invalid && (formcontroller.$dirty || this.attempted);
}
},
compile: function() {
return {
pre: function(scope, formelement, attributes, controllers) {
var submitcontroller = controllers[0];
var formcontroller = controllers.length > 1 ? controllers[1] : null;
submitcontroller.setformcontroller(formcontroller);
scope.rc = scope.rc || {};
scope.rc[attributes.name] = submitcontroller;
},
post: function(scope, formelement, attributes, controllers) {
var fn = $parse(attributes.rcsubmit);
formelement.bind("submit", function(event) {
submitcontroller.setattempted();
if (!scope.$$phase) scope.$apply();
if (!formcontroller.$valid) return;
scope.$apply(function() {
fn(scope, {
$event: event
});
});
});
}
};
}
};
驗證通過
<form name="loginform" novalidate
ng-app="loginapp" ng-controller="logincontroller" rc-submit="login()">
<div class="form-group"
ng-class="{'has-error': rc.loginform.needsattention(loginform.username)}">
<input class="form-control" name="username" type="text"
placeholder="username" required ng-model="session.username" />
<span class="help-block"
ng-show="rc.form.needsattention(loginform.username) &amp;&amp; loginform.username.$error.required">required</span>
</div>
ng-class="{'has-error': rc.loginform.needsattention(loginform.password)}">
<input class="form-control" name="password" type="password"
placeholder="password" required ng-model="session.password" />
ng-show="rc.form.needsattention(loginform.password) &amp;&amp; loginform.password.$error.required">required</span>
<div class="form-group">
<button type="submit" class="btn btn-primary pull-right"
value="login" title="login">
<span>login</span>
</button>
</form>
樣式如下
前端驗證通過會調用login()