LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code

  
    
    
    Ionic
    
    
  
  
    
    
      
      
    
    
    
    
  




JS
var app = angular.module('ionicApp', ['ionic', 'ui.router']);

app.config(function($stateProvider, $urlRouterProvider) {
  
  $stateProvider
  .state('login', {
    url: '/?card',
    templateUrl: 'login.html',
    controller: 'LoginCtrl'
  })
  .state('forgot-password', {
    url: '/forgot-password',
    templateUrl: 'forgot-password.html',
    controller: 'ForgotPasswordCtrl'
  });
  
  $urlRouterProvider.otherwise('/');
});

app.controller('LoginCtrl', function($scope, $state, $stateParams, $ionicViewSwitcher, $ionicNavBarDelegate){
  
  $scope.showCard = false;
  if($stateParams.card) $scope.showCard = true;
  
  $scope.forgotPassword = function () {
    $ionicViewSwitcher.nextDirection('forward');
    $state.go('forgot-password');
    $ionicNavBarDelegate.showBackButton(true);
  };
});

app.controller('ForgotPasswordCtrl', function($scope, $state, $ionicViewSwitcher, $ionicNavBarDelegate){
  
  $scope.resetPassword = function () {
    $ionicViewSwitcher.nextDirection('back');
    $state.go('login', { card: true });
    $ionicNavBarDelegate.showBackButton(false);
  };
});
Host Instantly Drag and Drop Website Builder

 

Description

When a user forgot his password, I want him to go to another view to reset his password. When the user clicks on the 'Forgot password?' button the view animates in and the back button is enabled to go back to the 'login' view. When the user resets his password I want to redirect him back to the 'login' view and show a message above the login form. To accomplish this I had to send a parameter. By just doing an $state.go() with a parameter, the animation goes forward instead of back. To redirect back I needed to set the animation direction before calling $state.go() and disable the back button, because the Ionic navigation stack things we're moving forward.
Term
Wed, 11/29/2017 - 11:22

Related Codes

Pen ID
Pen ID
Pen ID