Question

我正在尝试在离线移动应用中创建一个登录页面，在用户输入一些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();
    }
    });
    })

任何想法如何解决这个问题？

Answer 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"
          });
        }
      }
   })

如何在弹出确认离子后导航到其他页面

1 个答案: