I have an ion-nav-bar that is hid during login/signin process. After signing in I have tabs on the bottom with the nav bar at the top. The ion-nav-bar can be seen but the title isn't showing anything. What am I doing wrong? Any help would be appreciated.
index.html
<body ng-app="mychat">
<!--
The nav bar that will be updated as we navigate between views.
-->
<ion-nav-bar class="bar-header bar-assertive">
<ion-nav-back-button>
</ion-nav-back-button>
</ion-nav-bar>
<!--
The views will be rendered in the <ion-nav-view> directive below
Templates are in the /templates folder (but you could also
have templates inline in this html file if you'd like).
-->
<ion-nav-view></ion-nav-view>
</body>
app.js
.config(function($stateProvider, $urlRouterProvider) {
console.log("setting config");
// Ionic uses AngularUI Router which uses the concept of states
// Learn more here: https://github.com/angular-ui/ui-router
// Set up the various states which the app can be in.
// Each state's controller can be found in controllers.js
$stateProvider
// State to represent Login View
.state('login', {
url: "/login",
templateUrl: "templates/login.html",
controller: 'LoginCtrl',
resolve: {
// controller will not be loaded until $waitForAuth resolves
// Auth refers to our $firebaseAuth wrapper in the example above
"currentAuth": ["Auth",
function (Auth) {
// $waitForAuth returns a promise so the resolve waits for it to complete
return Auth.$waitForAuth();
}]
}
})
// setup an abstract state for the tabs directive
.state('tab', {
url: "/tab",
abstract: true,
templateUrl: "templates/tabs.html",
resolve: {
// controller will not be loaded until $requireAuth resolves
// Auth refers to our $firebaseAuth wrapper in the example above
"currentAuth": ["Auth",
function (Auth) {
// $requireAuth returns a promise so the resolve waits for it to complete
// If the promise is rejected, it will throw a $stateChangeError (see above)
return Auth.$requireAuth();
}]
}
})
// Each tab has its own nav history stack:
.state('tab.home', {
url: '/home',
views: {
'tab-home': {
templateUrl: 'templates/tab-home.html',
controller: 'HomeCtrl'
}
}
})
.state('tab.movies', {
url: '/movies',
views: {
'tab-movies': {
templateUrl: 'templates/tab-movies.html',
controller: 'MoviesCtrl'
}
}
})
.state('tab.people', {
url: '/people',
views: {
'tab-people': {
templateUrl: 'templates/tab-people.html',
controller: 'PeopleCtrl'
}
}
})
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/login');
});
tab-home.html
<ion-view title="Home">
<ion-content class="padding">
</ion-content>
</ion-view>
Use "view-title" attribute in tab-home.html
<ion-view view-title="my custom title" >
The most probable cause is the path of your templates not being correct. I have created this JSBin and it works fine with minor tweaks to the path of the login.html template. https://jsbin.com/loluva/1/edit?html,js,console,output
<script id="login.html" type='text/ng-template'>
<ion-view title="Login">
<ion-content class="padding">
</ion-content>
</ion-view>
</script>
Related
I'm facing a strange issue with ionic.
I'm trying to create a page (setup.html) with two subviews (roomContent and settingsContent).
My ui-router look like the following:
$stateProvider
.state('setup', {
url: '/setup',
abstract: true,
templateUrl: 'setup/setup.html',
controller: 'setupCtrl',
})
.state('setup.room', {
url: '/:roomID',
views: {
'roomContent': {
templateUrl: 'setup/room/roomSetup.html',
controller: 'roomSetupCtrl'
}
}
})
.state('setup.menu', {
url: '/settings',
views: {
'settingsContent': {
templateUrl: 'setup/menu/menuSetup.html'
}
}
});
and setup.htmltemplate like this:
// This should display content for roomContent (state: setup.room)
<ion-nav-view name="roomContent">
// ionic tabs here - don't want them on settings subview!
</ion-nav-view>
// This should display content for settingsContent (state: setup.menu)
<ion-nav-view name="settingsContent"></ion-nav-view>
But is not working like expected.
Basically, if I go to roomSetup, the content is not displayed. If I change the order of ion-nav-view in the html (settings before setup), then settings content is not displayed. It seams like it is displaying only the latest ion-nav-view.
Any suggestion?
Thanks
EDIT
At the end I solved this.
I changed a bit the folder structure and created a setup state and a new settings state, as I realized that I have only one setup state but multiple settings. This is the new structure, if it helps:
.state('setupRoom', {
url: '/setup/:roomID',
templateUrl: './sections/roomSetup/roomSetup.tpl.html',
controller: 'roomSetupCtrl',
data: {
requireLogin: false
}
}).state('settings', {
url: '/settings',
abstract: true,
templateUrl: './sections/settings/settings.tpl.html',
data: {
requireLogin: false
}
}).state('settings.menu', {
views: {
settingsContent: {
templateUrl: './sections/settings/menu/menuSettings.tpl.html'
}
}
}).state('settings.system', {
url: '/system',
views: {
settingsContent: {
templateUrl: './sections/settings/system/systemSettings.tpl.html',
controller: 'settingsSystemCtrl'
}
}
});
This should be defined not as multiple states, but with a single state with multiple views. The way you did, you would need two separate URLs to show at same time. As in UIRouter the URL is attached to the state, this wouldn't be possible.
$stateProvider
.state('report',{
views: {
'filters': {
templateUrl: 'report-filters.html',
controller: function($scope){ ... controller stuff just for filters view ... }
},
'tabledata': {
templateUrl: 'report-table.html',
controller: function($scope){ ... controller stuff just for tabledata view ... }
},
'graph': {
templateUrl: 'report-graph.html',
controller: function($scope){ ... controller stuff just for graph view ... }
}
}
})
See UI-Router docs about multiple views
You need nested views :
In setup state configuration
views: {
'setup#': {
templateUrl: 'setup/setup.html',
controller: 'setupCtrl'
}
}
and now you use roomContent#setup and settingsContent2#setup
Edit:
If this still does not work you can still try to replace <ion-nav-view> by <div ui-view>.
See https://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views for more details
I create modal in which I create a button that open child state named menu.friend
that I defined it like that:
app.config(function($stateProvider, $urlRouterProvider){
$stateProvider
.state('menu', {
url: '/menu',
abstract: true,
templateUrl: 'views/menu.html'
})
.state('menu.friend', {
url: '/map',
views: {
'menuContent': {
templateUrl: 'views/map.html'
}
}
})
In my ion-modal-view, I put this button code:
<button ui-sref="menu.friend">
Add event
</button>
But nothing is displayed. Any help please.
Hi i Think your code is working fine. Thing is modal has a z-index whicch is more than a view so it is sitting on top of the new view.
so do something like this
<button ui-sref="menu.friend" ng-click="modalClose()">
Add event
</button>
Also I prefer more cleaner state urls , something like this
app.config(function($stateProvider, $urlRouterProvider){
$stateProvider
.state('menu', {
url: '/menu',
abstract: true,
templateUrl: 'views/menu.html'
})
.state('menu.friend', {
url: '/menu/friend',
views: {
'menuContent': {
templateUrl: 'views/map.html'
}
}
})
I am trying to set up an app with multiple screens and some screens should have sub screens. the tabs are working fine and linking up with the correct template but the subpages are not working. i cant even browse to the set urls. when i click on the icons it goes to the default i have set in the otherwise method.
APP JS File
$stateProvider
// setup an abstract state for the tabs directive
.state('tab', {
url: '/tab',
abstract: true,
templateUrl: 'templates/tabs.html'
})
// Each tab has its own nav history stack:
.state('tab.home', {
url: '/home',
views: {
'tab-home': {
templateUrl: 'templates/tab-home.html',
controller: 'HomeCtrl'
}
}
})
.state('tab.aboutApps', {
url: '/aboutApps',
views: {
'tab-aboutApps': {
templateUrl: 'templates/tab-aboutApps.html'
}
}
})
.state('tab.aboutApps.pricing', {
url: '/aboutApps/pricing',
views: {
'detail-pricing': {
templateUrl: 'templates/detail-pricing.html'
}
}
})
.state('tab.aboutApps.features', {
url: '/features',
views: {
'detail-features': {
templateUrl: 'templates/detail-features.html'
}
}
})
HTML
<ion-item class="text-wrap" href="#/tab/aboutApps/features">
<p>Features</p>
<ion-nav-view title="Features" name="detail-features" class="text-wrap"</ion-nav-view>
</ion-item>
<ion-item class="text-wrap" href="#/tab/aboutApps/pricing">
<p>Pricing</p>
<ion-nav-view title="Pricing" name="detail-priceing" class="text-wrap"></ion-nav-view>
</ion-item>
i am new to ionic and dont see why this wont work. i am thinking that there is a problem in creating the path or url
Where you are using:
href="#/tab/aboutApps/pricing"
on your ion-item,
change this to:
ui-sref="tab.aboutApps.pricing"
This is a directive that binds a link to a state.
You can read more about it here:
http://angular-ui.github.io/ui-router/site/#/api/ui.router.state.directive:ui-sref
I cannot get the button to close the Modal, or for the click outside of the modal to close the window. I do not get an error and I have the same problem using a simple Controller, or the ControllerAs syntax.
My sample Modal code:
angular.module('MyApp').controller('TestCtrl', ["$scope", "$mdDialog",
function($scope, $mdDialog) {
var alert;
$scope.showInfoModal = showGameInfoModal;
// Internal method
function showGameInfoModal(schedule) {
$scope.schedule = schedule;
alert = $mdDialog.show({
clickOutsideToClose: true,
disableParentScroll: true,
escapeToClose: true,
scope: $scope, // use parent scope in template
preserveScope: true, // do not forget this if use parent scope
// Since GreetingController is instantiated with ControllerAs syntax
// AND we are passing the parent '$scope' to the dialog, we MUST
// use 'vm.<xxx>' in the template markup
templateUrl: 'Modules/Test/Test2.html',
controller: function DialogController($scope, $mdDialog) {
$scope.closeDialog = function() {
$mdDialog.hide();
};
},
controllerAs: 'dc'
});
}
}
]);
And then the Partials HTML:
<md-content>
<md-toolbar flex layout="row" layout-align="center">
<h5>{{schedule.GameDate</h5>
</md-toolbar>
<section layout="column" layout-align="center">
<div ng-init="coords={latitude: false, longitude: false}">
<gm-map options="{center: [43.6576221, -79.607505], zoom: 13, mapTypeId: google.maps.MapTypeId.ROADMAP}">
<gm-marker options="{position: [43.6576221, -79.607505], draggable: false}">
<gm-infowindow options="{content: 'Max Ward 2'}"></gm-infowindow>
</gm-marker>
</gm-map>
</div>
</section>
<section>
<div class="md-actions">
<md-button ng-click="dc.closeDialog()" class="md-fab md-fab-bottom-right md-mini" aria-label="Close"><ng-md-icon icon="close"></ng-md-icon></md-button>
</div>
</section>
</md-content>
In searching for more examples, I found that I missed the <md-dialog> tags.
<md-dialog aria-label="Game Info and Map">
<md-content>
<md-toolbar flex layout="row" layout-align="center">
...
</md-toolbar>
</md-content>
</md-dialog>
How to make tabs in ionic framework as a child on a single page. I want create home page , when i fire next button in home page , it will direct to tabs page. Here is the parent of tabs page {tabs page is child of login.html page}, here is login.html page :
<ion-view view-title="Login">
<ion-content >
<p>
<a class="button icon ion-home" href="#> Home</a>
</p>
</ion-content>
</ion-view>
Here is my app.js :
// Ionic Starter App
// angular.module is a global place for creating, registering and retrieving Angular modules
// 'starter' is the name of this angular module example (also set in a <body> attribute in index.html)
// the 2nd parameter is an array of 'requires'
// 'starter.services' is found in services.js
// 'starter.controllers' is found in controllers.js
angular.module('starter', ['ionic', 'starter.controllers', 'starter.services'])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
if (window.cordova && window.cordova.plugins && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
}
if (window.StatusBar) {
// org.apache.cordova.statusbar required
StatusBar.styleLightContent();
}
});
})
.config(function($stateProvider, $urlRouterProvider) {
// Ionic uses AngularUI Router which uses the concept of states
// Learn more here: https://github.com/angular-ui/ui-router
// Set up the various states which the app can be in.
// Each state's controller can be found in controllers.js
$stateProvider
// setup an abstract state for the tabs directive
.state('login',{
url: '/login',
templateURL: "templates/login.html"
})
.state('tab', {
parent: 'login',
url: "/tab",
abstract: true,
templateUrl: "templates/tabs.html"
})
// Each tab has its own nav history stack:
.state('tab.dash', {
url: '/dash',
views: {
'tab-dash': {
templateUrl: 'templates/tab-dash.html',
controller: 'DashCtrl'
}
}
})
.state('tab.chats', {
url: '/chats',
views: {
'tab-chats': {
templateUrl: 'templates/tab-chats.html',
controller: 'ChatsCtrl'
}
}
})
.state('tab.chat-detail', {
url: '/chats/:chatId',
views: {
'tab-chats': {
templateUrl: 'templates/chat-detail.html',
controller: 'ChatDetailCtrl'
}
}
})
.state('tab.account', {
url: '/account',
views: {
'tab-account': {
templateUrl: 'templates/tab-account.html',
controller: 'AccountCtrl'
}
}
});
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/tab/dash');
});
I think you are pretty close. In login.html set the href attribute to /tab. Make sure that all the templates mentioned in your code exists, otherwise angular will fail. Maybe you could also change url in $urlRouterProvider.otherwise('/tab/dash'); to /login so the user will see the login page by default when your app opens.