Ionic - Showing side-menu ONLY in concrete pages

2019-03-18 12:26发布

站内文章 / 移动开发
10 0 0

问题:

I'm developing an App with Ionic Framework, and I only want to show a side-menu in some concrete views, but not in every view.

I' have my menu.html file:

<ion-side-menus>

  <ion-pane ion-side-menu-content>
    <ion-nav-bar class="bar-positive nav-title-slide-ios7">
    </ion-nav-bar>
    <ion-nav-view name="menuContent" animation="slide-left-right"></ion-nav-view>
  </ion-pane>

  <ion-side-menu side="left">

    <ion-content class="mymenu">

      <div id="menu-list">
        <ion-list class="list">
          <ion-item item-type="item-icon-left" nav-clear menu-close href="#">
            <i class="icon ion-home"></i><span>Menu Item</span>
          </ion-item>
           ...
        </ion-list>
      </div>

    </ion-content>

  </ion-side-menu>

</ion-side-menus>

My index.html's body tag looks exactly like this:

 <body ng-app="myApp">
   <ion-nav-view></ion-nav-view>
 </body>

And the JavaScript code where I set up my App states:

    .config(function($stateProvider, $urlRouterProvider) {
      $stateProvider
        .state('app', {
          url: "/app",
          abstract: true,
          templateUrl: "templates/menu.html",
          controller: 'AppCtrl'
        })

        .state('app.page1', {
            url: "/page1",
            views: {
                'menuContent' :{
                    templateUrl: "templates/page1.html"
                }
            }
        })

        .state('app.page2', {
            url: "/page2",
            views: {
                'menuContent' :{
                    templateUrl: "templates/page2.html"
                }
            }
        })

        // etc...

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

page1.html and page2.html both contain the following structure:

<ion-view title="something">
   <ion-content>
       ... // here comes the html content of the page
   </ion-content>
</ion-view>

What can I actually do to only show my side-menu (menu.html) on page1.html and not on page2.html?? Is there anything I'm missing??

Is there a way of inserting the menu.html content only on those pages I want it to appear and forgetting about creating the state that uses it as templateUrl?

回答1:

The reason why your all your pages have side menu is because you 'app' state as their parent state. When a state is activated, its templates are automatically inserted into the <ion-view> of its parent state's template. If it's a top-level state, because it has no parent state then its parent template is index.html. The app state has the side menu in it.

Your code should look like this:

config(function($stateProvider, $urlRouterProvider) {
      $stateProvider
        .state('app', {
          url: "/app",
          abstract: true,
          templateUrl: "templates/menu.html",
          controller: 'AppCtrl'
        })

         //this state has the 'app' state (which has the sidemenu) as its parent state
        .state('app.page1', {
            url: "/page1",
            views: {
                'menuContent' :{
                    templateUrl: "templates/page1.html"
                }
            }
        })

         //this state has no parent, so it uses 'index.html' as its template. The index page has no 
         //sidemenu in it
        .state('page2', {
            url: "/page2",
            templateUrl: "templates/page2.html"
            }
        })

         ///more code here
   });

Check out https://github.com/angular-ui/ui-router/wiki



回答2:

if your problem is simple , use 

onExit: function(){
    angular.element(document.querySelector('#menuAPP')).removeClass('hidden');
}

into state



回答3:

just add hide-nav-bar=" true " in ion-view

<ion-view title="Login" **hide-nav-bar="true"** id="page" class=" "> </ion-view>


标签： ionic-framework
举报

收藏的人(0)

Ta的文章 更多文章
登录 后发表评论
0条评论
还没有人评论过~