Ionic: Как показать другое меню для другого вида?

Я работаю над проектом, используя Ionic Framework. Я хочу получить правильное меню на определенной странице (каждое правильное меню будет иметь разное содержимое). Я не уверен, как это реализовать.


ionic-framework angularjs ionic-view
person user2899728    schedule 23.02.2016    source источник
comment
это трудно понять..!вставьте немного кода..!и опишите больше..чтобы получить помощь..!   -  person the_mahasagar    schedule 23.02.2016
comment
пожалуйста, добавьте один пример, чтобы дать вам решение.   -  person Santosh Shinde    schedule 23.02.2016

Ответы (1)


arrow_upward
1
arrow_downward

Я предполагаю, что вы хотите, чтобы боковое меню отличалось при изменении вида, см. пример ниже:

HTML

<html ng-app="ionicApp">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">

    <title>Ionic Template</title>

    <link href="http://code.ionicframework.com/1.0.0-beta.4/css/ionic.css" rel="stylesheet">
    <script src="http://code.ionicframework.com/1.0.0-beta.4/js/ionic.bundle.js"></script>
  </head>
  <body >

    <ion-nav-view></ion-nav-view>

    <script id="app.html" type="text/ng-template">
<ion-side-menus>

  <ion-pane 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-chevron-left"></i> Back</ion-nav-back-button>
    </ion-nav-bar>
    <ion-nav-view name="appContent" animation="slide-left-right"></ion-nav-view>
  </ion-pane>

  <ion-side-menu side="left">
      <ion-nav-view name="menuList"></ion-nav-view>
  </ion-side-menu>
</ion-side-menus>

    </script>    

    <script id="browse.html" type="text/ng-template">
<ion-view title="Browse">
  <ion-nav-buttons side="left">
    <button menu-toggle="left"class="button button-icon icon ion-navicon"></button>
  </ion-nav-buttons>
  <ion-content class="has-header">
    <h1>Browse</h1>
  </ion-content>
</ion-view>

    </script>    

    <script id="menuBrowse.html" type="text/ng-template">
<header class="bar bar-header bar-stable">
    <h1 class="title">First Menu</h1>
</header>
<ion-content class="has-header">
    <ion-list>
        <ion-item nav-clear menu-close href="#/app/search">
            Search
        </ion-item>
        <ion-item nav-clear menu-close href="#/app/playlists">
            Second Menu
        </ion-item>
    </ion-list>
</ion-content>

    </script>    


    <script id="menuPlaylists.html" type="text/ng-template">
      <header class="bar bar-header bar-stable">
    <h1 class="title">Second Menu</h1>
</header>
<ion-content class="has-header">
    <ion-list>
        <ion-item nav-clear menu-close href="#/app/search">
            Search
        </ion-item>
        <ion-item nav-clear menu-close href="#/app/browse">
            Different Menu
        </ion-item>
    </ion-list>
</ion-content>

    </script>    


    <script id="menuSearch.html" type="text/ng-template">
<header class="bar bar-header bar-stable">
    <h1 class="title">Search Menu</h1>
</header>
<ion-content class="has-header">
    <ion-list>
        <ion-item nav-clear menu-close href="#/app/browse">
            Browse
        </ion-item>
        <ion-item nav-clear menu-close href="#/app/playlists">
            Playlists
        </ion-item>
    </ion-list>
</ion-content>

    </script>    

    <script id="playlist.html" type="text/ng-template">
<ion-view title="Playlist">
  <ion-content class="has-header">
    <h1>Playlist</h1>
  </ion-content>
</ion-view>

    </script>    

    <script id="playlists.html" type="text/ng-template">
<ion-view title="Playlists">
  <ion-nav-buttons side="left">
    <button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
  </ion-nav-buttons>
  <ion-content class="has-header">
    <ion-list>
      <ion-item ng-repeat="playlist in playlists" href="#/app/playlists/{{playlist.id}}">
        {{playlist.title}}
      </ion-item>
    </ion-list>
  </ion-content>
</ion-view>

    </script>    

    <script id="search.html" type="text/ng-template">
<ion-view title="Search">
  <ion-nav-buttons side="left">
    <button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
  </ion-nav-buttons>
  <ion-content class="has-header">
    <h1>Search</h1>
  </ion-content>
</ion-view>

    </script>    

    <script id="" type="text/ng-template">

    </script>    

    <script id="" type="text/ng-template">

    </script>    



  </body>
</html>

JS

angular.module('ionicApp', ['ionic'])


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

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

            .state('app.search', {
                url: "/search",
                views: {
                    'appContent' :{
                        templateUrl: "search.html"
                    },
                    'menuList': {
                        templateUrl : "menuSearch.html"
                    }
                }
            })

            .state('app.browse', {
                url: "/browse",
                views: {
                    'appContent' :{
                        templateUrl: "browse.html"
                    },
                    'menuList': {
                        templateUrl : "menuBrowse.html"
                    }
                }
            })

            .state('app.playlists', {
                url: "/playlists",
                views: {
                    'appContent' :{
                        templateUrl: "playlists.html",
                        controller: 'PlaylistsCtrl'
                    },
                    'menuList': {
                        templateUrl : "menuPlaylists.html",
                        controller: "PlaylistsCtrl"
                    }

                }
            })

            .state('app.single', {
                url: "/playlists/:playlistId",
                views: {
                    'appContent' :{
                        templateUrl: "playlist.html",
                        controller: 'PlaylistCtrl'
                    }
                }
            })

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

    .controller('AppCtrl', function($scope) {
    })

    .controller('PlaylistsCtrl', function($scope, $state) {
        $scope.playlists = [
         { title: 'WebRuster', id: 1 },
        { title: 'WebRuster', id: 2 },
        { title: 'WebRuster', id: 3 },
        { title: 'WebRuster', id: 4 },
        { title: 'WebRuster', id: 5 },
        { title: 'WebRuster', id: 6 }
        ];

        $scope.goTabs = function() {
            console.log('Going to tabs!');
            $state.go("app.tabs.home");
        }
    })

    .controller('PlaylistCtrl', function($scope, $stateParams) {
    })

Здесь работает CodePen.

person The Blue Shirt Developer    schedule 23.02.2016
comment
Спасибо за ответ. Это решение выглядит очень хорошо. К сожалению, в моем случае это не сработало. У меня уже есть левое меню, но я хочу показать дополнительное правое меню - person user2899728; 23.02.2016
comment
@ user2899728 вы имеете в виду, что хотите добавить меню в существующее боковое меню? если да, пожалуйста, предоставьте свой код, чтобы я попытался его настроить. - person The Blue Shirt Developer; 23.02.2016
comment
Нет @webruster, я просто хочу иметь разные меню справа для разных представлений. Левое меню уже работает нормально и не изменится. Я просто говорю о правом боковом меню. - person user2899728; 23.02.2016
comment
@ user2899728 вы хотите два боковых меню? - person The Blue Shirt Developer; 23.02.2016
comment
Да правильно, но правильное будет разным для разных взглядов. Например, если я просматриваю изображение, в правом меню будут показаны параметры для редактирования и удаления фотографии. Точно так же все другие представления будут иметь другое правое боковое меню в зависимости от характера контента. - person user2899728; 23.02.2016
comment
@user2899728 user2899728, что означает, что мое предыдущее решение сработает, но мне нужно включить статическое левое меню, а правое меню должно быть вышеупомянутым решением, вы этого хотите? - person The Blue Shirt Developer; 23.02.2016
comment
@user2899728 user2899728, пожалуйста, предоставьте свой код, чтобы он облегчил мою работу, и я мог встроить его в ваш код. - person The Blue Shirt Developer; 23.02.2016
comment
Вы можете проверить файлы на dropbox.com/s/5yu8deldsletcgk/rANTER.zip ?дл=0 - person user2899728; 23.02.2016
comment
@user2899728 почтовый индекс в квесте не могу скачать и отредактировать - person The Blue Shirt Developer; 23.02.2016