Geek Answers Handbook

Using Ionic Tabs on the Side Menu Page

I am new to the ionic structure and trying to get the tabs component to use on the side menu page, which works fine, but the navigation animations from page to page declaring slide left-right animations do not work.

eg. there is a basic state (application) that contains the side menu code

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

and loaded into

 <body> <ion-nav-view animation="slide-left-right"></ion-nav-view> ...

auxiliary menu pages are loaded with the parent (app.pageOne, app.pageTwo, etc.)

Login and registration pages are loaded to the root, so there is no need to include a side menu (login, registration, etc.)

I created a tab template for use on the side menu page with a different base state for the tabs

 .state('app.tabs', { url: '/tab', abstract: true, views: { 'menuContent' :{ templateUrl: "templates/tabs.html" } } })

and loaded as a side menu

 <ion-nav-view name="menuContent" animation="slide-left-right"></ion-nav-view>

Now, if I have the app.pageOne page and go to app.pageTwo, the slide animation works as expected.

But if I’m on the app.tabs.home tab and click on the link to go to app.pageTwo, the navigation bar does not update and no animation transition occurs.

I know this looks like a parent child problem, but I just can't solve it, any ideas?

look like this:

 login register app ____page1 |____page2 |____Tabs |____Home |____Contact etc

page1 animation on page2 works fine Homepage2 is not animation (it just loads right away)

Hope this makes sense.

+4
angularjs angular-ui-router ionic-framework
source share
1 answer

check this url http://codepen.io/calendee/pen/JdtuG?editors=101 this works for me :)

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/0.9.27/css/ionic.min.css" rel="stylesheet"> <script src="http://code.ionicframework.com/0.9.27/js/ionic.bundle.min.js"></script> </head> <body> <!-- ALL VIEW STATES LOADED IN HERE --> <ion-nav-view></ion-nav-view> <script id="entry.html" type="text/ng-template"> <ion-nav-bar animation="nav-title-slide-ios7" type="bar-positive" back-button-type="button-icon" back-button-icon="ion-ios7-arrow-back"> </ion-nav-bar> <ion-view title="{{navTitle}}" class="bubble-background"> <ion-content has-header="true" padding="true"> <h1>Entry Page!</h1> <a class="button button-positive" ng-click="signIn()" ui-sref="main.home">Sign In</a> </ion-content> </ion-view> </script> <script id="tabs.html" type="text/ng-template"> <ion-view title="{{navTitle}}" left-buttons="leftButtons"> <ion-tabs tabs-type="tabs-icon-only"> <ion-tab title="Tab 1" icon-on="ion-ios7-filing" icon-off="ion-ios7-filing-outline"> <ion-content has-header="true" padding="true"> <h2>Tab 1 Content</h2> </ion-content> </ion-tab> <ion-tab title="Tab 2" icon-on="ion-ios7-filing" icon-off="ion-ios7-filing-outline"> <ion-content has-header="true" padding="true"> <h2>Tab 2 Content</h2> </ion-content> </ion-tab> <ion-tab title="Tab 3" icon-on="ion-ios7-filing" icon-off="ion-ios7-filing-outline"> <ion-content has-header="true" padding="true"> <h2>Tab 3 Content</h2> </ion-content> </ion-tab> </ion-tabs> </ion-view> </script> <script id="mainContainer.html" type="text/ng-template"> <ion-side-menus> <ion-pane ion-side-menu-content> <ion-nav-bar type="bar-positive" back-button-type="button-icon" back-button-icon="ion-ios7-arrow-back" animation="nav-title-slide-ios7" > </ion-nav-bar> <ion-nav-view name="main"></ion-nav-view> </ion-pane> <ion-side-menu side="left"> <header class="bar bar-header bar-assertive"> <div class="title">Side Menu</div> </header> <ion-content has-header="true"> <ul class="list"> <a ui-sref="entry" class="item">Back To Entry Page</a> <a ui-sref="main.home" class="item" ng-click="toggleMenu()">Home</a> <a ui-sref="main.tabs" class="item" ng-click="toggleMenu()">Tabs</a> </ul> </ion-content> </ion-side-menu> </ion-side-menus> </script> <script id="home.html" type="text/ng-template"> <ion-view title="{{navTitle}}" left-buttons="leftButtons"> <ion-content has-header="true" padding="true"> <h1>Home Page!</h1> <a ui-sref="main.info" class="button button-positive">Info</a> </ion-content> </ion-view> </script> <script id="info.html" type="text/ng-template"> <ion-view title="{{navTitle}}" left-buttons="leftButtons"> <ion-content has-header="true" padding="true"> <h1>Info Page!</h1> </ion-content> </ion-view> </script> </body> </html>

Javascript

 angular.module('ionicApp', ['ionic']) .config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) { $stateProvider .state('entry', { url : '/entry', templateUrl : 'entry.html', controller : 'EntryPageController' }) .state('main', { url : '/main', templateUrl : 'mainContainer.html', abstract : true, controller : 'MainController' }) .state('main.home', { url: '/home', views: { 'main': { templateUrl: 'home.html', controller : 'HomePageController' } } }) .state('main.info', { url: '/info', views: { 'main': { templateUrl: 'info.html', controller : 'InfoPageController' } } }) .state('main.tabs', { url: '/tabs', views: { 'main': { templateUrl: 'tabs.html', controller : 'TabsPageController' } } }) $urlRouterProvider.otherwise('/entry'); }]) .controller('MainController', [ '$scope', function($scope) { $scope.toggleMenu = function() { $scope.sideMenuController.toggleLeft(); } }]) .controller('EntryPageController', [ '$scope', '$state', function($scope, $state) { $scope.navTitle = 'Entry Page'; $scope.signIn = function() { $state.go('main.home'); } }]) .controller('HomePageController', [ '$scope', '$state', function($scope, $state) { $scope.navTitle = 'Home Page'; $scope.leftButtons = [{ type: 'button-icon icon ion-navicon', tap: function(e) { $scope.toggleMenu(); } }]; }]) .controller('InfoPageController', [ '$scope', '$state', function($scope, $state) { $scope.navTitle = 'Info Page'; $scope.leftButtons = [{ type: 'button-icon icon ion-navicon', tap: function(e) { $scope.toggleMenu(); } }]; }]) .controller('TabsPageController', [ '$scope', '$state', function($scope, $state) { $scope.navTitle = 'Tab Page'; $scope.leftButtons = [{ type: 'button-icon icon ion-navicon', tap: function(e) { $scope.toggleMenu(); } }]; }])

it took some tweaks, but finally he worked on my script

+5
source share

More articles: