angularjs - Using Ionic tabs on a side menu page -
i new ionic framework , trying accomplish using tabs component on side menu page works fine navigation animations page page slide-left-right animation declaration don't work.
for e.g. there base of operations state (app) holds 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> ... side menu pages loaded parent (app.pageone, app.pagetwo etc)
login , register pages loaded @ root no need include side menu (login, register etc)
i created tabs template utilize on side menu page base of operations state tabs
.state('app.tabs', { url: '/tab', abstract: true, views: { 'menucontent' :{ templateurl: "templates/tabs.html" } } }) and loaded in side menu view
<ion-nav-view name="menucontent" animation="slide-left-right"></ion-nav-view> now if have page 'app.pageone' , navigate 'app.pagetwo' slide animations works expected.
but if i'm on tab page 'app.tabs.home' , click link go 'app.pagetwo' nav-bar don't update nor there animation transition.
i'm aware looks parent kid issue can't solve it, ideas?
state follows eg
login register app ____page1 |____page2 |____tabs |____home |____contact etc page1 animation page2 works fine home page2 doesn't animate (it loads straight away)
hope makes more sense.
check url http://codepen.io/calendee/pen/jdtug?editors=101 works 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> <!-- 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 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 tweaks worked on scenario
angularjs angular-ui-router ionic-framework
No comments:
Post a Comment