2017-03-10 11 views
0

私のコードは正常に動作しています。しかし、私はログインボタンをクリックすると、写真に示されているように状態が変わります。そのURLは変更されていますが、そのページは開かれません。どのようにして次のページにリダイレクトできますか? before click on login page ログインページからメインページにイオンを使用して移動

after click on login page

index.htmlを

<body ng-app="starter"> 
    <ion-nav-view></ion-nav-view> 
    </body> 

login.htmlと

<ion-view view-title="login"> 
    <ion-header-bar> 
    <h1 class="title">Login</h1> 
    <div class="buttons"> 
     <button class="button button-clear" ng-click="closeLogin()">Close</button> 
    </div> 
    </ion-header-bar> 
    <ion-content> 
    <form ng-submit="doLogin()"> 
     <div class="list"> 
     <label class="item item-input"> 
      <span class="input-label">Username</span> 
      <input type="text" ng-model="loginData.username"> 
     </label> 
     <label class="item item-input"> 
      <span class="input-label">Password</span> 
      <input type="password" ng-model="loginData.password"> 
     </label> 
     <label class="item"> 
      <button class="button button-block button-positive" type="submit">Log in</button> 
     </label> 
     </div> 
    </form> 
    </ion-content> 
</ion-view> 

app.js

angular.module('starter', ['ionic', 'starter.controllers']) 
.config(function($stateProvider, $urlRouterProvider) { 
    $stateProvider 

    .state('app', { 
    url: '/app', 
    templateUrl: 'templates/login.html', 
    controller: 'AppCtrl' 
    }) 

    .state('app.menu', { 
    url: '/home', 
    abstract: true, 
    templateUrl: 'templates/menu.html', 
    controller: 'AppCtrl' 
    }) 
    .state('app.search', { 
    url: '/search', 
    views: { 
    ' menuContent': { 
      templateUrl: 'templates/search.html' 
     } 
    } 
    }) 
}); 

Controllers.js

angular.module('starter.controllers', []) 

.controller('AppCtrl', function($scope, $ionicModal, $timeout, $state) { 

    // With the new view caching in Ionic, Controllers are only called 
    // when they are recreated or on app start, instead of every page change. 
    // To listen for when this page is active (for example, to refresh data), 
    // listen for the $ionicView.enter event: 
    //$scope.$on('$ionicView.enter', function(e) { 
    //}); 

    // Form data for the login modal 
    $scope.loginData = {}; 

    // Create the login modal that we will use later 
    $ionicModal.fromTemplateUrl('templates/login.html', { 
    scope: $scope 
    }).then(function(modal) { 
    $scope.modal = modal; 
    }); 

    // Triggered in the login modal to close it 
    $scope.closeLogin = function() { 
    $scope.modal.hide(); 
    }; 

    // Open the login modal 
    $scope.login = function() { 
    $scope.modal.show(); 
    }; 

    // Perform the login action when the user submits the login form 
    $scope.doLogin = function() { 
    console.log('Doing login', $scope.loginData); 
    $state.go('app.search'); 

    // Simulate a login delay. Remove this and replace with your login 
    // code if using a login system 
    $timeout(function() { 
     $scope.closeLogin(); 
    }, 1000); 
    }; 
}) 
+1

'「app.search''状態 –

+0

は今 –

+0

何の状態iが .state(参照やっ$ stateProvider'状態 –

答えて

0

からabstract: trueを削除するあなたは、検索状態があなたを表示するアプリケーションの状態(の子状態であること作られましたログイン)。

したがって、最初にログインしたテンプレートが表示され、このテンプレートには他の状態が表示されるのを助けるためのものは含まれません。 URLと ログイン/ URL /アプリや抽象 と アプリにログインし、その後、URL /検索でapp.search:

は、私はあなたの状態になりたいと思います。

あなたのURLバーに/ app/searchと表示され、正しいURLと正しい状態になります。

+0

何をすべきですか? –

+0

私が言ったように、あなたはログイン状態と/ログインURLでアプリ状態を置き換えるべきです。 あなたの状態をapp.menu => menuとし、そのURL /状態を作ります。 あなたは期待どおりのものを見なければならないと思う;) – MisterJ

+0

これは基本的にはa。状態とは、状態の子状態を作成することを意味します。 したがってstate.childState.childStateOfChildStateなど) – MisterJ

0

子状態

.state('app.menu', { 
    url: '/home', 
    templateUrl: 'templates/menu.html', 
    controller: 'AppCtrl' 
    }) 
+0

まだだけで表示次のページに移動しませんその状態が変更されたURL –

+0

コンソールにエラーが表示されました –

関連する問題