javascript - Ionic view does not route to correct view -
for reason 1 of tabs(the chat tab) doesn't work. other tabs work i'm not sure why chat tab doesn't work. can see plunker chats tab blank while other tabs show content. in actual app title bar shows has text of previous tab.
so heres plunker: http://plnkr.co/edit/k4sknwdmdm2twjmurdxj?p=preview
heres code:
index.html:
<!doctype html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title></title> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"> <link rel="stylesheet" href="style.css"> <link rel="stylesheet" type="text/css" href="http://code.ionicframework.com/1.0.0-beta.11/css/ionic.min.css"> <script src="http://code.ionicframework.com/1.0.0-beta.11/js/ionic.bundle.min.js"></script> <!-- ionic/angularjs js --> <script src="lib/ionic/js/ionic.bundle.js"></script> <!-- firebase --> <script src="https://cdn.firebase.com/js/client/2.2.4/firebase.js"></script> <!-- angularfire --> <script src="https://cdn.firebase.com/libs/angularfire/1.1.3/angularfire.min.js"></script> <script src="app.js"></script> <script src="controllers.js"></script> <script src="services.js"></script> </head> <body ng-app="starter"> <!-- nav bar updated navigate between views. --> <ion-nav-bar class="bar-stable"> <ion-nav-back-button> </ion-nav-back-button> </ion-nav-bar> <!-- views rendered in <ion-nav-view> directive below templates in /templates folder (but have templates inline in html file if you'd like). --> <ion-nav-view></ion-nav-view> </body> </html> chat.html
<ion-view view-title="chats"> <ion-content> asdsadsa <ion-list> <ion-item class="item-remove-animate item-avatar item-icon-right" ng-repeat="chat in chats" type="item-text-wrap" href="#/tab/chats/{{chat.id}}"> <img ng-src="chat.closet"> <h2>{{chat.email}}</h2> <p>{{chat.heightft}}</p> <i class="icon ion-chevron-right icon-accessory"></i> <ion-option-button class="button-assertive" ng-click="remove(chat)"> delete </ion-option-button> </ion-item> </ion-list> </ion-content> </ion-view> tabs.html:
<!-- create tabs icon , label, using tabs-positive style. each tab's child <ion-nav-view> directive have own navigation history transitions views in , out. --> <ion-tabs class="tabs-icon-top tabs-color-active-positive"> <!-- dashboard tab --> <ion-tab title="status" icon-off="ion-ios-pulse" icon-on="ion-ios-pulse-strong" href="#/tab/dash"> <ion-nav-view name="tab-dash"></ion-nav-view> </ion-tab> <!-- chats tab --> <ion-tab title="chats" icon-off="ion-ios-chatboxes-outline" icon-on="ion-ios-chatboxes" href="#/tab/chats"> <ion-nav-view name="tab-chats"></ion-nav-view> </ion-tab> <!-- account tab --> <ion-tab title="account" icon-off="ion-ios-gear-outline" icon-on="ion-ios-gear" href="#/tab/account"> <ion-nav-view name="tab-account"></ion-nav-view> </ion-tab> <ion-tab title="settings" hidden="true"> <ion-nav-view name="tab-settings"></ion-nav-view> </ion-tab> </ion-tabs> app.js
// ionic starter app // angular.module global place creating, registering , retrieving angular modules // 'starter' name of angular module example (also set in <body> attribute in index.html) // 2nd parameter array of 'requires' // 'starter.services' found in services.js // 'starter.controllers' found in controllers.js angular.module('starter', ['ionic', 'firebase', 'starter.controllers', 'starter.services']) .run(function($ionicplatform, $rootscope, $firebaseobject) { $rootscope.ref = new firebase("https://vivid-fire-3325.firebaseio.com"); $rootscope.isloggedin = false; $ionicplatform.ready(function() { // hide accessory bar default (remove show accessory bar above keyboard // form inputs) if (window.cordova && window.cordova.plugins && window.cordova.plugins.keyboard) { cordova.plugins.keyboard.hidekeyboardaccessorybar(true); cordova.plugins.keyboard.disablescroll(true); } if (window.statusbar) { // org.apache.cordova.statusbar required statusbar.styledefault(); } }); }) .config(function($stateprovider, $urlrouterprovider) { // ionic uses angularui router uses concept of states // learn more here: https://github.com/angular-ui/ui-router // set various states app can in. // each state's controller can found in controllers.js $stateprovider // setup abstract state tabs directive .state('tab', { url: '/tab', abstract: true, templateurl: 'tabs.html' }) // each tab has own nav history stack: .state('tab.dash', { url: '/dash', views: { 'tab-dash': { templateurl: 'tab-dash.html', controller: 'dashctrl' } } }) .state('tab.chats', { url: '/chats', views: { 'tab-chats': { templateurl: 'tab-chats.html', controller: 'chatsctrl' } } }) .state('tab.chat-detail', { url: '/chats/:chatid', views: { 'tab-chats': { templateurl: 'chat-detail.html', controller: 'chatdetailctrl' } } }) .state('tab.account', { url: '/account', views: { 'tab-account': { templateurl: 'tab-account.html', controller: 'accountctrl' } } }) .state('tab.settings', { url: '/settings', views: { 'tab-settings': { templateurl: 'tab-settings.html', controller: 'settingsctrl' } } }); // if none of above states matched, use fallback $urlrouterprovider.otherwise('/tab/dash'); }); thanks.
edit:
named chat file in plunker incorrectly. changed name of chat.html chats.html. still not work however, here new plunker:
your tab activates means, problem has view. change tab-chats.html tab-chat.html
Comments
Post a Comment