离子侧菜单问题

Question

我的主页和侧边菜单有问题，每当我尝试进入主页时，它都会弹回我的“否则”视图。每当我在 app.js 中删除菜单的实现时，我的主页都可以正常工作。我决定使用空白版本，而不是使用启动菜单https://github.com/driftyco/ionic-starter-sidemenu，这样我就可以尽可能多地了解 Ionic... 以下是我的代码。

app.js

   .config(function($stateProvider, $urlRouterProvider)
  {
    $stateProvider
      .state('intial', {
        url: '/',
        templateUrl: 'auth/Walkthrough.html',
        controller: 'WalkthroughCtrl'
      })
      .state('login', {
        url: '/login',
        templateUrl: 'auth/Login.html',
        controller: 'LoginCtrl'
      })
      .state('sign', {
        url: '/sign', 
        templateUrl: 'auth/SignUp.html',
        controller: 'SignUpCtrl'
      })

    .state('app', {
      url: '/app',
      abstract: false,
      templateUrl: 'app/menu.html',
      controller: 'AppCtrl'
  })

  .state('app.home', {
    url: '/home',
    views: {
      'menuContent': {
        templateUrl: 'app/Home.html',
        controller: 'HomeCtrl'
      }
    }
  })

    });

主页.html

<ion-view title="Home">
  <ion-pane class="animated fadeIn" style="background-color: #4da6b1">
    <ion-nav-bar align-title="center">
    <ion-nav-title>
        <span style="color: white">Home</span>
    </ion-nav-title>
        <ion-nav-buttons side="left">
     <button menu-toggle="left" class="button button-icon icon ion-navicon-round" style="color: white; background-color:#028090;" ></button>
    </ion-nav-buttons>
  </ion-nav-bar>



    <ion-content class="has-header" style="margin-top: 10px;" data-tap-disabled="true">
   <!--    <div class=".col" style=" margin-left: 2px;border: 1px solid white; width: 50%; height: 50%; border-radius: 5px;">
      </div> -->

    </ion-content>


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

menu.html

<ion-side-menus enable-menu-with-back-views="false">

  <ion-side-menu-content>
    <ion-nav-bar class="bar-stable nav-title-slide-ios7">
      <ion-nav-back-button class="button-clear"><i class="icon ion-ios7-arrow-back"></i>Back</ion-nav-back-button>
    </ion-nav-bar>
    <ion-nav-view name="menuContent" animation="slide-left-right"></ion-nav-view>
  </ion-side-menu-content>

  <ion-side-menu side="left">
    <header class="bar bar-header bar-stable">
      <h1 class="title">Left</h1>
    </header>
    <ion-content class="has-header">
      <ion-list>
        <ion-item menu-close ng-click="login()">
          Login
        </ion-item>
        <ion-item menu-close href="#/app/search">
          Search
        </ion-item>
        <ion-item menu-close href="#/app/browse">
          Browse
        </ion-item>
        <ion-item menu-close href="#/app/playlists">
          Playlists
        </ion-item>
      </ion-list>
    </ion-content>
  </ion-side-menu>
</ion-side-menus>

请帮忙。

Answer 1

在 html 页面按钮中你没有 ng-click

这是离子侧边菜单的格式

  <ion-side-menu-content>
  <!-- Main content, usually <ion-nav-view> -->
  </ion-side-menu-content>

  <!-- Right menu -->
  <ion-side-menu side="right">
  </ion-side-menu>

</ion-side-menus>

这应该在你的控制器内

function ContentController($scope, $ionicSideMenuDelegate) {
  $scope.toggleLeft = function() {
    $ionicSideMenuDelegate.toggleLeft();
  };
}

有关离子侧边菜单的更多信息，请参阅this。

同样在href="#/app/browse", href="#/app/search", href="#/app/playlists"

所有此页面都未在您的 .config 中定义，因此请创建这些页面并将它们添加到您的 .config 中，您不需要所有的 href。

对于 $state.go('home');你应该在你的模块中注入 ui.router 并下载 angular-ui-router.min.js 并将其添加到你的项目中或查看this 这样它就可以工作了。