javascript - Ionic / Angular ui-router -a href's returning wrong URL/content -
i have ionic tab menu shows 4 items (the code below , codepen have 2 items clarity) , "more" item leads further menu choices displayed list in ion-content. uses angular ui-router. have 2 possibly connected issues.
issue 1: @ first app appears working correctly start navigate around few links (generally after visiting "more", tabs start return incorrect urls. example:
stating @ news > contact > more > sports > contacts > news > more - breaks here, see contacts content instead of more content.
i've add console.log each controller , in chrome dev tools console, can see each tab click seems lunch event, e.g. clicking news tab means 'news' appears twice in console. in addition, in nav example above, console shows contacts controller launched when clicked more.
so summarise, after clicks around app, href targets seem sending me wrong place, if 1 had edited code while running.
issue 2: until point nav breaks described above, button works correctly pages launched tabs, pages launched "more" page (ie list) there no button.
sorry these beginner questions!
codepen : http://codepen.io/anon/pen/hbpfa
index.html:
<!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/style.css" rel="stylesheet"> <script src="lib/ionic/js/ionic.bundle.js"></script> <script src="js/app.js"></script> </head> <body ng-app="schoolapp" animation="slide-left-right-ios7"> <ion-nav-bar class="bar-stable nav-title-slide-ios7 bar-positive"> <ion-nav-back-button class="button-icon icon ion-ios7-arrow-back"> </ion-nav-back-button> </ion-nav-bar> <ion-nav-view></ion-nav-view> <script id="tabs.html" type="text/ng-template"> <ion-tabs class="tabs-icon-top"> <ion-tab title="news" icon="icon ion-ios7-paper-outline ss-tab-icon" href="#/tab/news"> <ion-nav-view></ion-nav-view> </ion-tab> <ion-tab title="contact" icon="icon ion-ios7-telephone ss-tab-icon" href="#/tab/contact"> <ion-nav-view></ion-nav-view> </ion-tab> <ion-tab title="more" icon="icon ion-navicon-round ss-tab-icon" href="#/tab/more"> <ion-nav-view></ion-nav-view> </ion-tab> </ion-tabs> </script> <script id="more_tab_contents.html" type="text/ng-template"> <ion-view title="{{title}}"> <ion-content class="has-header padding"> <div class="list"> <a nav-clear class="item item-icon-left" href="#tab/info"> <i class="icon ion-ios7-information ss-tab-icon"></i> information </a> <a nav-clear class="item item-icon-left" href="#tab/pictures"> <i class="icon ion-camera ss-tab-icon"></i> pictures </a> <a nav-clear class="item item-icon-left" href="#tab/sport"> <i class="icon ion-ios7-football-outline ss-tab-icon"></i> sports </a> </div> </ion-content> </ion-view> </script> <script id="inside.html" type="text/ng-template"> <ion-view title="{{title}}"> <ion-content class="has-header padding"> <div class="ss_inside_content"> <h1>{{title}}</h1> <ol> <li>in faucibus condimentum libero, vel iaculis nibh tristique ac. nunc vitae urna felis. praesent lectus ligula, vulputate id dolor at, porttitor pretium nulla. </li> <li>in faucibus condimentum libero, vel iaculis nibh tristique ac. nunc vitae urna felis. praesent lectus ligula, vulputate id dolor at, porttitor pretium nulla. </li> <li>in faucibus condimentum libero, vel iaculis nibh tristique ac. nunc vitae urna felis. praesent lectus ligula, vulputate id dolor at, porttitor pretium nulla. </li> <li>in faucibus condimentum libero, vel iaculis nibh tristique ac. nunc vitae urna felis. praesent lectus ligula, vulputate id dolor at, porttitor pretium nulla. </li> <li>in faucibus condimentum libero, vel iaculis nibh tristique ac. nunc vitae urna felis. praesent lectus ligula, vulputate id dolor at, porttitor pretium nulla. </li> <li>in faucibus condimentum libero, vel iaculis nibh tristique ac. nunc vitae urna felis. praesent lectus ligula, vulputate id dolor at, porttitor pretium nulla. </li> <li>in faucibus condimentum libero, vel iaculis nibh tristique ac. nunc vitae urna felis. praesent lectus ligula, vulputate id dolor at, porttitor pretium nulla. </li> </ol> </div> </ion-content> </ion-view> </script> <script id="" type="text/ng-template"> </script> </body> </html> app.js:
var schoolapp = angular.module('schoolapp', ['ionic']) schoolapp.config(function($stateprovider, $urlrouterprovider) { $stateprovider // setup abstract state tabs directive .state('tab', { url: "/tab", abstract: true, templateurl: "tabs.html" }) .state('tab.news', { url: '/news', templateurl: 'inside.html', controller: 'newsctrl' }) .state('tab.contact', { url: '/contact', templateurl: 'inside.html', controller: 'contactctrl' }) .state('tab.info', { url: '/info', templateurl: 'inside.html', controller: 'infoctrl' }) .state('tab.pictures', { url: '/pictures', templateurl: 'inside.html', controller: 'picturesctrl' }) .state('tab.sport', { url: '/sport', templateurl: 'inside.html', controller: 'sportctrl' }) .state('tab.more', { url: '/more', templateurl: 'more_tab_contents.html', controller: 'morectrl' }) // if none of above states matched, use fallback $urlrouterprovider.otherwise('/tab/news'); }); schoolapp.controller('infoctrl', function($scope) { $scope.title="information"; console.log ( 'info' ); }) schoolapp.controller('newsctrl', function($scope) { $scope.title="latest news"; console.log ( 'news' ); }) schoolapp.controller('contactctrl', function($scope) { $scope.title="contacts"; console.log ( 'contact' ); }) schoolapp.controller('picturesctrl', function($scope) { $scope.title="pictures"; console.log ( 'pics' ); }) schoolapp.controller('sportctrl', function($scope) { $scope.title="sports"; console.log ( 'sport' ); }) schoolapp.controller('morectrl', function($scope) { $scope.title="further content choices"; console.log ( 'more' ); }); update
further discussions @sjoerddewit , looking @ ionic codepen examples, have reverted using named views, had done before. before loading "more" content tab view news - i'm loading more page, , pages links to, named view tab - think way ionic intend done. so, click/tap "more" menu choices, choose them , time still within more tab, still active. way should be?
one thing notice. if go 'more', 'sport' (within more) - go 1 of other tabs, more, sport, tap more again , more menu options.
a log on each state controller shows (for different sequence above same idea):
news named_views.js:96 (launch of app) contact named_views.js:100 more named_views.js:104 more > pics named_views.js:114 news named_views.js:96 more > pics named_views.js:114 first tap of more - revisit more named_views.js:104 tap again revised index.html - updates shown
<script id="tabs.html" type="text/ng-template"> <ion-tabs class="tabs-icon-top"> <ion-tab title="news" icon="icon ion-ios7-paper-outline ss-tab-icon" ui-sref="tab.news"> <ion-nav-view name="news-tab"></ion-nav-view> </ion-tab> <ion-tab title="contact" icon="icon ion-ios7-telephone ss-tab-icon" ui-sref="tab.contact"> <ion-nav-view name="contact-tab"></ion-nav-view> </ion-tab> <ion-tab title="more" icon="icon ion-navicon-round ss-tab-icon" ui-sref="tab.more"> <ion-nav-view name="more-tab"></ion-nav-view> </ion-tab> </ion-tabs> </script> <script id="more_tab_contents.html" type="text/ng-template"> <ion-view title="{{title}}"> <ion-content class="has-header padding"> <div class="list"> <a nav-clear class="item item-icon-left" ui-sref="tab.info"> <i class="icon ion-ios7-information ss-tab-icon"></i> information ui-sref </a> <a nav-clear class="item item-icon-left" ui-sref="tab.pictures"> <i class="icon ion-camera ss-tab-icon"></i> pictures </a> <a nav-clear class="item item-icon-left" ui-sref="tab.sport"> <i class="icon ion-ios7-football-outline ss-tab-icon"></i> sports </a> </div> </ion-content> </ion-view> </script> revised javascript:
var schoolapp = angular.module('schoolapp', ['ionic']) schoolapp.config(function($stateprovider, $urlrouterprovider) { $stateprovider // setup abstract state tabs directive .state('tab', { url: "/tab", abstract: true, templateurl: "tabs.html" }) .state('tab.news', { url: '/news', views: { 'news-tab': { templateurl: 'inside.html', controller: 'newsctrl' } } }) .state('tab.contact', { url: '/contact', views: { 'contact-tab': { templateurl: 'inside.html', controller: 'contactctrl' } } }) .state('tab.more', { url: '/more', views: { 'more-tab': { templateurl: 'more_tab_contents.html', controller: 'morectrl' } } }) .state('tab.info', { url: '/info', views: { 'more-tab': { templateurl: 'inside.html', controller: 'infoctrl' } } }) .state('tab.pictures', { url: '/pictures', views: { 'more-tab': { templateurl: 'inside.html', controller: 'picturesctrl' } } }) .state('tab.sport', { url: '/sport', views: { 'more-tab': { templateurl: 'inside.html', controller: 'sportctrl' } } }); $urlrouterprovider.otherwise('/tab/news'); }); // end config schoolapp.controller('newsctrl', function($scope) { $scope.title="latest news"; console.log('news'); }) schoolapp.controller('contactctrl', function($scope) { $scope.title="contact us"; console.log('contact'); }) schoolapp.controller('morectrl', function($scope) { $scope.title="more (tabs overflow)"; console.log('more'); }) schoolapp.controller('infoctrl', function($scope) { $scope.title="information"; console.log('more > info'); }) schoolapp.controller('picturesctrl', function($scope) { $scope.title="pictures"; console.log('more > pics'); }) schoolapp.controller('sportctrl', function($scope) { $scope.title="sports"; console.log('more > sports'); });
angular , ionic use ui-router. instead of using href attribute should use ui-sref followed state u want go too. i've remade footer tabs correct way of routing in ionic , angular
<ion-tabs class="tabs-icon-top"> <ion-tab title="news" icon="icon ion-ios7-paper-outline ss-tab-icon" ui-sref="tab.news"> <ion-nav-view name="news"></ion-nav-view> </ion-tab> <ion-tab title="contact" icon="icon ion-ios7-telephone ss-tab-icon" ui-sref="tab.contact"> <ion-nav-view name="contact"></ion-nav-view> </ion-tab> <ion-tab title="more" icon="icon ion-navicon-round ss-tab-icon" ui-sref="tab.more"> <ion-nav-view name="more"></ion-nav-view> </ion-tab> you not specify views. when click on news > contact contact loaded news ionview located in ion-tabs if u set names , change app.js should oke, although if i'm not mistaken button doesn't show anymore cause link present in tabs
.state('tab.news', { url: '/news', views: { 'news': { templateurl: 'inside.html', controller: 'newsctrl', } } }) .state('tab.contact', { url: '/contact', views: { 'contact': { templateurl: 'inside.html', controller: 'contactctrl', } } }) .state('tab.more', { url: '/more', views: { 'more': { templateurl: 'inside.html', controller: 'infoctrl', } } })
Comments
Post a Comment