【问题标题】:How to navigate to other page after a pop up confirmation ionic弹出确认离子后如何导航到其他页面
【发布时间】:2016-02-23 03:24:52
【问题描述】:

我正在尝试在 ionic 中为移动应用程序创建一个登录页面,在用户输入一些 ID 和密码后,它将导航到另一个页面。我尝试使用 state.go 和 location.path 但它不起作用。代码如下:

    angular.module('app.controllers', ['ionic','ui.router'])
    .controller('loginCtrl', function($scope, $ionicPopup, $state) {
    $scope.data ={};
    $scope.submitData = function(){

    if($scope.data.email && $scope.data.password){
        var alertPopup = $ionicPopup.alert({
            title: "Login Succesful",
            template: "Welcome Back "
        });
        $state.go('stateHome');
    }else{

        var alertPopup = $ionicPopup.alert({
            title: "Login Failed",
            template: "Please check your credentials"
        });
    }
    }
    })
    app.config(function($stateProvider, $urlRouterProvider) {
      $stateProvider
        .state('stateHome', {
        url: '/Home',
        views: {
        'Home' :{
        templateUrl : "templates/Home.html",
        controller : 'HomeCtrl'

        }
        }
    });

      $urlRouterProvider.otherwise('/Setting');


    })

我的 app.js 包含:

    angular.module('app', ['ionic', 'app.controllers', 'app.routes', 'app.services', 'app.directives'])

    .run(function($ionicPlatform) {
    $ionicPlatform.ready(function() {
    // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
    // for form inputs)
    if(window.cordova && window.cordova.plugins.Keyboard) {
    cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
    }
    if(window.StatusBar) {
    // org.apache.cordova.statusbar required
    StatusBar.styleDefault();
    }
    });
    })

知道如何解决这个问题吗?

【问题讨论】:

    标签: ionic-framework


    【解决方案1】:

    尝试如下修改您的文件。它应该工作。如果您感到困惑,我可以详细说明。

    app.js

    angular.module('app', ['ionic', 'app.controllers', 'app.routes', 'app.services', 'app.directives'])
    
    .run(function($ionicPlatform) {
        $ionicPlatform.ready(function() {
        // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
        // for form inputs)
            if(window.cordova && window.cordova.plugins.Keyboard) {
                cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
            }
            if(window.StatusBar) {
            // org.apache.cordova.statusbar required
                StatusBar.styleDefault();
            }
        });
    })
    
    .config(function($stateProvider, $urlRouterProvider){
    
        $stateProvider
    
        .state('stateHome', {
            url: '/Home',
            templateUrl: 'templates/Home.html',
            controller: 'HomeCtrl'
        })
    
    $urlRouterProvider.otherwise('/Setting');
    })
    

    controllers.js

    angular.module('app.controllers', [])
    
    .controller('loginCtrl', function($scope, $ionicPopup, $state, $location) {
    
        $scope.data ={};
        $scope.submitData = function(){
    
        $scope.goToHomePage = function () {
            $location.path("/Home");
        };
    
          if($scope.data.email && $scope.data.password){
             var alertPopup = $ionicPopup.alert({
                title: "Login Succesful",
                template: "Welcome Back "
             });    
             alertPopup.then(function(res) {
                if(res) {
                   $scope.goToHomePage();
                 } else {
                   console.log('Do something else');
                 }
              });
    
          }else{
    
               var alertPopup = $ionicPopup.alert({
                  title: "Login Failed",
                  template: "Please check your credentials"
              });
            }
          }
       })
    

    【讨论】:

    • 我已经尝试了你的建议,但是,在我进入登录页面并输入电子邮件和密码后,弹出“登录成功”但页面仍在登录页面而不是主页页面,知道我可能缺少的部分吗?
    • 我想我看到了你的问题。你的目录结构是什么样的?你有 app.js 吗?如果是这样,你可以发布它吗?我可以看到这条线 -> app.config(function($stateProvider, $urlRouterProvider) 看起来不合适,除非您只是将它们粘贴在您的控制器下方以用于此帖子。
    • 我的目录结构看起来像普通的,是appname,然后里面有钩子插件scss www,里面www是js,img,lib,模板等。基本上这是我们得到的确切内容我们使用 CLI 从 creator ionic 下载它。我确实有一个 app.js。
    • 所以在你上面的代码中,angular.module('app.controllers', ['ionic','ui.router']) 是在你自己的控制器模块中有}) 的代码的一半吗?其余的(app.config(function($stateProvider, $urlRouterProvider) { 以上)在您的app.js 中吗?
    • 好的。我现在将编辑我的答案,向您展示它的外观。
    猜你喜欢
    • 2021-05-27
    • 1970-01-01
    • 2019-06-20
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2023-01-13
    • 1970-01-01
    相关资源
    最近更新 更多