繁体   English   中英

离子性侧面菜单问题

[英]Ionic Side Menu Issue

我的主页和侧面菜单有问题,每当我尝试进入主页时,它就会弹回到我的“其他”视图。 每当我删除菜单的实现时,在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'
      }
    }
  })

    });

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

请帮忙。

在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();
  };
}

有关离子性侧面菜单的更多信息,请参阅

也在href="#/app/browse", href="#/app/search", href="#/app/playlists"

所有此页面均未在.config中定义,因此创建这些页面并将其添加到.config中 ,就不需要所有的href。

对于$ state.go('home'); 你应该将模块中注入ui.router和下载角-UI-router.min.js并把它添加到您的项目还是看这个所以它会奏效。

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM