directives.directive('pwCheck', function () {
return {
require: 'ngModel',
link: function (scope, elem, attrs, ctrl) {
var firstPassword = '#' + attrs.pwCheck;
// 網上好多例子都掉了$(elem) 美元符號和括號
$(elem).add(firstPassword).on('keyup', function () {
scope.$apply(function () {
alert(elem.val());
var v = elem.val()===$(firstPassword).val();
ctrl.$setValidity('pwmatch',v);
});
});
}
};
});
<div class="form-group" ng-class="{'has-error': developerForm.password.$dirty && developerForm.password.$invalid}">
<div class="col-sm-12">
<input type="password" ng-model="developer.password" name="password" id="password" class="form-control" placeholder="預設密碼" required>
</div>
<p class="text-warning help-block" ng-show="developerForm.password.$dirty && developerForm.password.$invalid">
<small ng-show="developerForm.password.$error.required">預設密碼必填!!</small>
</p>
</div>
<div class="form-group" ng-class="{'has-error': developerForm.rePassword.$dirty && developerForm.rePassword.$invalid}">
<div class="col-sm-12 ">
<input type="password" ng-model="developer.rePassword" name="rePassword" class="form-control" placeholder="確認密碼" pw-check="password" required>
</div>
<p class="text-warning help-block" ng-show="developerForm.rePassword.$dirty && developerForm.rePassword.$invalid">
<small ng-show="developerForm.rePassword.$error.required">確認密碼必填!!</small>
<small ng-show="developerForm.rePassword.$error.pwmatch">預設密碼和確認密碼不一致!!</small>
</p>
</div>
[size=medium]
http://angularjs4u.com/directives/angularjs-check-passwords-match-directive/
[/size]