如何从离子侧菜单导航到页面

时间:2016-08-03 10:07:40

标签: javascript angularjs ionic-framework apache-cordova

我刚刚在我的应用程序中实现了离子侧菜单加标签,但是当我点击侧面菜单中的项目时,它不会带我到那个页面。我看过很多例子,但它们让我更加困惑。 这是我的旁边菜单代码

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

.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 (cordova.platformId === 'ios' && window.cordova && window.cordova.plugins && window.cordova.plugins.Keyboard) {
        cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
        cordova.plugins.Keyboard.disableScroll(true);
    }
    if (window.StatusBar) {
      // org.apache.cordova.statusbar required
      StatusBar.styleDefault();
    }
  });
})

.config(function($stateProvider, $urlRouterProvider) {

  // Ionic uses AngularUI Router which uses the concept of states
  // Learn more here: https://github.com/angular-ui/ui-router
  // Set up the various states which the app can be in.
  // Each state's controller can be found in controllers.js
  $stateProvider

  // setup an abstract state for the tabs directive  
      
    .state('tab', {
    url: '/tab',
    abstract: true,
    controller: 'TabsCtrl',
    templateUrl: 'templates/tabs.html'
    })

      //i'm trying to setup an abstract state for the sideMenu directive here
    .state('app', {
          url: '/app',
          abstract: true,
          controller: 'TabsCtrl',
          templateUrl: 'templates/menu.html'
      })


  // Each tab has its own nav history stack:

  .state('tab.play', {
    url: '/play',
    views: {
      'tab-play': {
        templateUrl: 'templates/tab-play.html',
        controller: 'PlaysCtrl'
      }
    }
  })
.state('tab.play-detail', {
    url: '/play/:playId',
    views: {
        'tab-play': {
            templateUrl: 'templates/play-detail.html',
            controller: 'PlayDetailCtrl'
        }
    }
})

  .state('tab.live', {
      url: '/live',
      views: {
        'tab-live': {
          templateUrl: 'templates/tab-live.html',
          controller: 'DashCtrl'
        }
      }
    })
    
  .state('tab.win', {
    url: '/win',
    views: {
      'tab-win': {
        templateUrl: 'templates/tab-win.html',
        controller: 'WinCtrl'
      }
    }
  })
  .state('tab.win-detail', {
      url: '/win/:playId',
      views: {
          'tab-win': {
              templateUrl: 'templates/win-detail.html',
              controller: 'winDetailCtrl'
          }
      }
  })
  .state('app.aboutUs', {
      url: "/aboutUs",
      views: {
          'menuContent': {
              templateUrl: "templates/aboutUs.html",
              controller: 'AboutCtrl'
          }
      }
  });

  // if none of the above states are matched, use this as the fallback
  $urlRouterProvider.otherwise('/tab/play');

});

.controller('TabsCtrl', function ($scope, $ionicSideMenuDelegate) {

    $scope.openMenu = function () {
        $ionicSideMenuDelegate.toggleRight();
    }

})

.controller('AboutCtrl', function ($scope, $ionicSideMenuDelegate) {
    
})
<ion-side-menus>

    <ion-pane ion-side-menu-content>
        <ion-nav-bar class="nav-title-slide-ios7">
            <ion-nav-back-button class="button-icon"><span class="icon ion-ios-close-empty"></span></ion-nav-back-button>
        </ion-nav-bar>
        <ion-nav-view></ion-nav-view>
    </ion-pane>

    <ion-side-menu side="right">
        <ion-header-bar class="bar bar-header bar-light"></ion-header-bar>
        <ion-content has-header="true">
            <ion-list>
                <ion-item href="#/app/aboutUs" menu-close><i class="icon ion-information margin-right"></i>About</ion-item>
                
            </ion-list>
        </ion-content>
    </ion-side-menu>

</ion-side-menus>

我只是简直无法弄清楚如何让它发挥作用。

我们将不胜感激。感谢

0 个答案:

没有答案