离子侧菜单多视图

时间：2015-10-12 15:42:10

标签： ionic-framework ionic-view

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

这是我的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个视图????

2 个答案:

答案 0 :(得分：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",
            }
        }
    })

答案 1 :(得分：0)

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

}

相关问题
最新问题