I have a form in an ionic popup. I am trying to do form validation when the form gets submitted. The popup gets created and the form gets submitted in the controller function. The problem is when I try to access the form through the scope in the function where the form gets submitted to I cannot get the form through the scope. I believe this is because ionicpopup creates a new scope on the popup as seen https://github.com/driftyco/ionic/blob/master/js/angular/service/popup.js#L17 line 280. Can someone explain. Following is my code.
// Controler
(function() {
var iam = 'HomeCtrl'
,dependencies = ['$scope', '$ionicPopup']
,f = function($scope, $ionicPopup) {
var me = this;
// Creates the pop
$scope.showLogin = function () {
$scope.user = {
username: '', password: ''
}
popLogin = $ionicPopup.show({
title: 'Welcome'
,templateUrl: '/app/home/login.html'
,scope: $scope
,subTitle: 'Sign in & start composing', id: 'login-form'
,buttons: [
{
text: 'Sign In'
,onTap: function() {
console.log(this.loginForm);
}
}
]
});
}
// Function where the form gets submitted to.
$scope.doLogin = function() {
console.log('here', this, $scope);
}
}
angular.module('cv').controller(iam, dependencies.concat(f));
})();
And this is the form
// Form template
<form name="loginForm" ng-submit="doLogin()" novalidate>
<div class="list">
<label class="item item-input" ng-class="{'cv-invalid': loginForm.username.$invalid && !loginForm.username.$pristine}">
<input placeholder="Email Id" ng-model="user.username" type="email" ng-maxlength="50" required name="username">
</label>
<label class="item item-input" ng-class="{'cv-invalid': loginForm.password.$invalid && !loginForm.password.$pristine}">
<input type="password" placeholder="Password" ng-model="user.password" name="password" ng-minlength="6" required >
</label>
<button type="submit" class="button col button-assertive">Sign in</button>
</div>
</form>
As you can see in the doLogin() function in the controller I get a new scope in this. Can someone explain what I am doing wrong.