HTML
<script id="templates/changePassword.html" type="text/ng-template">
<ion-modal-view class="grey_bg">
<ion-nav-bar class="bar-balanced">
<ion-nav-title>
Change Password
</ion-nav-title>
<ion-nav-buttons side="right">
<button class="button button-icon button-clear ion-close-round"
ng-click="ChangePassword()"></button>
</ion-nav-buttons>
</ion-nav-bar>
<ion-content class="has-header toTransofrm" padding="10">
<div class="list">
<form class="register-form" name="formRegister">
<label class="item item-input"
ng-class="{ 'has-errors' : formRegister.oldPassword.$invalid &&
!formRegister.oldPassword.$pristine, 'no-errors' : formRegister.oldPassword.$valid}">
<input focus type="password" placeholder="Current Password"
id="oldPassword" name="oldPassword" ng-model="oldPassword" required />
</label>
<label class="item item-input"
ng-class="{ 'has-errors' : formRegister.userPassword.$invalid
&& !formRegister.userPassword.$pristine, 'no-errors' : formRegister.userPassword.$valid}">
<input focus type="password" placeholder="New Password"
id="userPassword" name="userPassword" ng-model="userPassword" required />
</label>
<label class="item item-input"
ng-class="{ 'has-errors' : formRegister.confirmPassword.$invalid &&
!formRegister.confirmPassword.$pristine, 'no-errors' : formRegister.confirmPassword.$valid}">
<input focus type="password" id="confirmPassword"
name="confirmPassword" placeholder="Confirm New Password"
ng-model="confirmPassword" required compare-to="userPassword">
</label>
<div class="msg-block ng-invalid" ng-show="formRegister.$error">
<span class="msg-error ng-invalid"
ng-show="formRegister.confirmPassword.$error.pwmatch">
Password doesn't match.
</span>
</div>
<div class="button-bar bar-balanced">
<a class="button" ng-click="openPasswordModal()"
ng-disabled="formRegister.$invalid" style="font-size:25px">Change Password</a>
</div>
</form>
</div>
</ion-content>
</ion-modal-view>
</script>
JS
//open popup model
$scope.openPasswordModal = function (animation) {
$ionicModal.fromTemplateUrl('templates/changePassword.html', {
scope: $scope,
animation: animation
}).then(function (modal) {
$scope.passwordModal = modal;
$scope.passwordModal.show();
});
};
//close popup model
$scope.closePasswordModal = function () {
$scope.passwordModal.hide();
};
Directive
//password compare
app.directive('compareTo', [function () {
return {
require: "ngModel",
scope: {
otherModelValue: "=compareTo"
},
link: function (scope, element, attributes, ngModel) {
var firstPassword = '#' + attributes.compareTo;
element.on('keyup', function () {
scope.$apply(function () {
var v = element.val() === $(firstPassword).val();
ngModel.$setValidity('pwmatch', v);
});
});
}
};
}]);