How to do validation in $ionicPopup?

Question

I'm trying to use $ionicPopup to handle login/registration on my app. I'm opening it from a service, so I created a new scope and attached it to the ionicPopup.

It looks something like this:

$ionicPopup.show
  template: '''
    <form name="loginForm" novalidate>
      ...
    </form>
  ''',
  scope: $scope,
  buttons: [
    { 
      text: 'Cancel',
    },
    {
      text: '<b>Save</b>',
      type: 'button-positive',
      onTap: ( e ) ->

        form = $scope.loginForm #why is it undefined?
    } 
  ]

So I named the form as loginForm, and I want to access it inside the onTap function to handle validation. But the loginForm does not exists on the $scope, like it would in a normal form validation inside a controller.

How should I handle the validation here?

Answer 1

If you give ionicpopup a templateUrl, instead of hard coded template string, you can use a regular controller inside the template that does the validation.

I deleted all the ionicpopup related buttons and placed the necessary buttons inside the template.

In this way I was able to control the ionicpopup's state from the controller (i.e. closing the popup).