Javascript 带有登录页面的Ionic应用程序端菜单

我正在构建一个基于侧菜单的导航应用程序。我遇到的问题是，试图将其与登录页面一起实现，而登录页面不属于侧菜单的范围，因此只有在登录之后，才应使用侧菜单导航

以下是我的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">

---

})我为你做了一个小演示

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>

---

如果您需要任何附加功能，请告诉我？谢谢

谢谢！我会看一看，如果我需要什么，我会告诉你。你是如何制作的，这样它就可以与服务和ctrl.js一起工作？@rcat24：很抱歉，我不了解。我基本上不想硬编码菜单中每个项目的名称和操作，但我想有一个控制器，它可以从服务中将其提取为字典/数组。我尝试调用ng控制器，但是由于某些原因，它没有从数组中获取信息。您可以创建一个plunker示例吗？

  .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);
};

<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>

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');
});