0

我想尝试了解离子侧菜单，但我有很多问题，因为文档很差。

这是我的 index.html（我尝试加载 2 个视图非内容）

<!DOCTYPE html>
<html >
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>

<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/ionicons.css" rel="stylesheet">

<link href="css/style.css" rel="stylesheet">

<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->

</head>
<body ng-app="ehc">

<ion-side-menus enable-menu-with-back-views="false">
<ion-side-menu-content>
    <!-- barra in alto con pulsante mostra menu -->
    <ion-nav-bar class="nav-title-slide-ios7 bar-positive">

        <ion-nav-back-button>
        </ion-nav-back-button>

        <ion-nav-buttons class="button-balanced" side="left">
            <button class="button button-icon  ion-navicon" menu-toggle="left"></button>
        </ion-nav-buttons>
    </ion-nav-bar>

    <!--<ion-nav-view name="menuContent" animation="slide-left-right">    </ion-nav-view>-->
    <ion-nav-view name="a"></ion-nav-view>
    <ion-nav-view name="b"></ion-nav-view>
</ion-side-menu-content>
<!--
=================================
            menu nascosto
=================================
-->
<ion-side-menu side="left">
    <header class="bar bar-header bar-dark">
        <h1 class="title">Left menu voce</h1>
    </header>

    <ion-content    has-header="true" overflow-scroll="true">
        <ul class="list">

            <a  class="item item-icon-left gray"
                  href="#"
                  ng-click="toggleLeftMenu()"><i class="icon ion-home"></i>Cover
            </a>

            <a  class="item item-icon-left gray"
                  href="#"
                  ng-click="toggleLeftMenu()"><i class="icon ion-help"></i>Get Help
            </a>

            <a  class="item item-icon-left gray"
                  href="#"
                  ng-click="toggleLeftMenu()"><i class="icon ion-star"></i> Rate Us
            </a>

            <a  class="item item-icon-left gray"
                  href="#"
                  ng-click="toggleLeftMenu()"><i class="icon ion-gear-a"></i>Settings
            </a>
        </ul>

    </ion-content>

</ion-side-menu>

</ion-side-menus>

</body>
</html>
<!-- remove in production -->
<script src="http://easyhomecosts.localhost:9000/livereload.js"></script>
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>

<!-- cordova script (this will be a 404 during development) -->
<!-- <script src="cordova.js"></script> -->

<!-- your app's js -->
<script src="js/ehcapp.js"></script>`

这是我的 ehcapp.js 角度模块

angular.module("ehc", ["ionic"])
.config(function ($urlRouterProvider,$stateProvider) {

  $urlRouterProvider.otherwise('/a');

  $stateProvider.state('stateA', {
    url: '/a',
    views: {
      a: {
        templateUrl: 'templates/a.html'
      },
      b:{
        templateUrl: 'templates/b.html'
      }
    }
  });

  $stateProvider.state('stateB', {
    url: '/b',
    views: {
      b: {
        templateUrl: 'templates/b.html'
      }
    }
  });
})    .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 (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.styleLightContent();
    }
  });

模板 a.html e b.html 里面只有 100 A 和 100 B。

当我运行应用程序时，我只看到菜单和“BBBBBBBBBBBBBBB”（因为许多 BBBBB 都隐藏在“nav”中

可以从导航开始我的文本？？？？？？可以调用 2 次查看？？？？

4

2 回答 2

0

首先，您在 www 文件夹中创建一个模板文件夹。此文件夹添加 a.html、b.html 和 menu.html.ion-side-menus 标记范围从 index.html 中删除。

Menu.html 示例部分：

 <ion-side-menus enable-menu-with-back-views="true">
        <ion-side-menu-content>
    <!-- barra in alto con pulsante mostra menu -->
    <ion-nav-bar class="nav-title-slide-ios7 bar-positive">

        <ion-nav-back-button>
        </ion-nav-back-button>

        <ion-nav-buttons class="button-balanced" side="left">
            <button class="button button-icon  ion-navicon" menu-toggle="left"></button>
        </ion-nav-buttons>
    </ion-nav-bar>

    <!--<ion-nav-view name="menuContent" animation="slide-left-right">    </ion-nav-view>-->
    <ion-nav-view name="a"></ion-nav-view>
    <ion-nav-view name="b"></ion-nav-view>
</ion-side-menu-content>
        <ion-side-menu side="left">
    <header class="bar bar-header bar-dark">
        <h1 class="title">Left menu voce</h1>
    </header>

    <ion-content    has-header="true" overflow-scroll="true">
       <ion-list>
            <ion-item menu-close href="#/app/a">
                A page
            </ion-item>
            <ion-item menu-close href="#/app/b">
                B page
            </ion-item>     

        </ion-list>

    </ion-content>

</ion-side-menu>

</ion-side-menus>

echapp.js 是代码审查：

    angular.module("ehc", ["ionic"])
$urlRouterProvider.otherwise('app/A');

   .run(function($ionicPlatform) {
      $ionicPlatform.ready(function() {
 if (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.styleLightContent();
    }
}
});
.config(function ($urlRouterProvider,$stateProvider) {

  $stateProvider

        .state('app', {
            url: "/app",
            abstract: true,
            templateUrl: "templates/menu.html",
        })    

       .state('app.a', {
        url: "/a",
        views: {
            'menuContent': {
                templateUrl: "templates/a.html",
            }
        }
    })   
      .state('app.b', {
        url: "/b",
        views: {
            'menuContent': {
                templateUrl: "templates/b.html",
            }
        }
    })
于 2015-10-13T12:15:33.380 回答
0

菜单.html

 <ion-side-menus enable-menu-with-back-views="true">
        <ion-side-menu-content>
    <!-- barra in alto con pulsante mostra menu -->
    <ion-nav-bar class="nav-title-slide-ios7 bar-positive">

        <ion-nav-back-button>
        </ion-nav-back-button>

        <ion-nav-buttons class="button-balanced" side="left">
            <button class="button button-icon  ion-navicon" menu-toggle="left"></button>
        </ion-nav-buttons>
    </ion-nav-bar>

    <ion-nav-view name="menuContent" animation="slide-left-right">
    </ion-nav-view>
</ion-side-menu-content>
        <ion-side-menu side="left">
    <ion-header-bar class="bar bar-header bar-dark">
        <h1 class="title">Left menu voce</h1>
    </ion-header-bar>

    <ion-content    has-header="true" overflow-scroll="true">
       <ion-list>
            <ion-item menu-close href="#/app/a">
                A page
            </ion-item>
            <ion-item menu-close href="#/app/b">
                B page
            </ion-item>     

        </ion-list>

    </ion-content>

</ion-side-menu>

</ion-side-menus>

echApp.js 配置部分：

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

        .state('app', {
            url: "/app",
            abstract: true,
            templateUrl: "templates/menu.html",
        })    

       .state('app.a', {
        url: "/a",
        views: {
            'menuContent': {
                templateUrl: "templates/a.html",
            }
        }
    })   
      .state('app.b', {
        url: "/b",
        views: {
            'menuContent': {
                templateUrl: "templates/b.html",
            }
        }
    })  
$urlRouterProvider.otherwise('/app/a');

}

于 2015-10-14T07:26:24.523 回答