帶登錄頁面的離子應用程序側菜單

Question

我正在構建基於側邊菜單的導航應用程序。我遇到的問題是試圖將它與一個登錄頁面一起實現，這不是側面菜單範圍的一部分，所以只有在登錄後，才能使用側面菜單導航。

這裏是我的app.js：

.config(function($stateProvider, $urlRouterProvider) { 
$stateProvider 
    .state('signin', { 
    url: '/sign-in', 
    templateUrl: 'templates/sign-in.html', 
    controller: 'SignInCtrl' 
    }) 

    .state('sideMenu', { 
    url: '/sideMenu', 
    abstract: true, 
    templateUrl: 'templates/sideMenu.html', 
    controller: 'sideMenuCtrl' 
    }) 

    .state('home', { 
    url: '/home', 
    templateUrl: 'templates/home.html', 
    controller: 'homeTabCtrl' 
    }) 
    //}) 

$urlRouterProvider.otherwise('/home'); 
}) 

這是側面菜​​單的HTML：

<ion-view ng-controller="sideMenuCtrl"> 

<ion-pane ion-side-menu-content> 
    <ion-nav-bar type="bar-assertive" back-button-type="button-icon" back-button-icon="ion-arrow-left-c"></ion-nav-bar> 

    <ion-nav-view> 
    </ion-nav-view> 
</ion-pane> 

<!-- Left Side Menu --> 
<ion-side-menu side="right"> 
    <ion-header-bar class="bar bar-header bar-assertive"> 
    <h1 class="title">Menu</h1> 
    </ion-header-bar> 
    <ion-content has-header="true"> 
    <ion-list> 
     <ion-item ng-click="goTo(item.link)" class="item item-icon-left" ng-repeat="item in list" menu-close> 
     <!-- <i ng-class="item.iconClass"></i> --> 
     {{item.text}} 
     </ion-item> 
    </ion-list> 
    </ion-content> 
</ion-side-menu> 

控制器：

.controller('sideMenuCtrl', function ($scope, $location, MenuService) { 
console.log('Side menu is reloaded'); 

// "MenuService" is a service returning mock data (services.js) 
$scope.list = MenuService.all(); 

$scope.goTo = function(page) { 
    console.log('Going to ' + page); 
    $scope.sideMenuController.toggleLeft(); 
    $location.url('/' + page); 
}; 

}）

Answer 1

我已經爲你一個小演示，

Plunker Demo

HTML

<ion-view hide-nav-bar="true " class="view-bg-blue"> 
    <ion-nav-buttons side="left"> 
     <button class="button button-icon button-clear ion-navicon" ng-click="openMenu()"></button> 
    </ion-nav-buttons> 
    <ion-content padding="true"> 
     <h3 class="text-center">Welcome To Landing Page</h3> 
     <div class="row"> 
      <div class="col"> 
       <div class="text-center"> 
        <h4>My App</h4> 
        <div class="row"> 
         <div class="col"> 
          <input placeholder="User"> 
         </div> 
        </div> 
        <div class="row"> 
         <div class="col"> 
          <input placeholder="password"> 
         </div> 
        </div> 
        <a class="button icon-right ion-chevron-right button-calm" ng-click="open()">Login</a> 
       </div> 
      </div> 
     </div> 
    </ion-content> 
</ion-view> 

app.js

var app = angular.module('myApp', ['ionic']); 

app.config(function($stateProvider, $urlRouterProvider) { 
    $stateProvider 
     .state('tabs', { 
      url: '/tab', 
      controller: 'TabsCtrl', 
      templateUrl: 'tabs.html' 
     }) 
     .state('tabs.home', { 
      url: '/home', 
      views: { 
       'home-tab': { 
        controller: 'homeCtrl', 
        templateUrl: 'home.html' 
       } 
      } 
     }) 
     .state('tabs.settings', { 
      url: '/settings', 
      views: { 
       'settings-tab': { 
        controller: ' signOutCtrl', 
        templateUrl: 'settings.html' 
       } 
      } 
     }); 
    $stateProvider 
     .state('landing', { 
      url: '/landing', 
      controller: 'landingCtrl', 
      templateUrl: 'landing.html' 
     }); 

    $urlRouterProvider.otherwise('/landing'); 
}); 

如果您需要任何額外的功能，請讓我知道？謝謝