Hi i'm having two views in my app with two controllers assigned to each.
Here i need to reinitialize the controller every time when ever i navigate to particular view.
Angular Script:
.state('app.pnrlist', {
url: "/pnrlist",
views: {
'menuContent': {
templateUrl: "templates/test.html",
controller: "testControl",
reload: true
}
},
reload:true
})
.state('app.home', {
url: "/home",
views: {
'menuContent': {
templateUrl: "templates/home.html",
controller:"homeControl",
reload:true
}
},
reload:true
})
HTML Content
<ion-content>
<ion-list>
<ion-item nav-clear menu-close href="#/app/home">
Home
</ion-item>
<ion-item nav-clear menu-close href="#/app/pnrlist">
PNR List
</ion-item>
</ion-list>
</ion-content>
I have tried to implement many solutions on stack but none helped me.
Solution Tried 1 /
Solution Tried 2
If its a matter of the View not updating, disabling the Cache may help
i.e
.state('app.home', {
url: "/home",
cache: false,
As by default, views are cached to improve performance. You can also disable the cache via the 'cache-view' attribute
<ion-view cache-view="false" view-title="My Title!">
...
</ion-view>
Related
Ionic sidemenu default app created and map and markerClick tow page was add ed in menu list. Map is working fine but MarkerClick is not. When click on MarkerClick form sidemenu this redirect on last active page.
menu.html
<ion-side-menu side="left">
<ion-header-bar class="bar-stable">
<h1 class="title">Left</h1>
</ion-header-bar>
<ion-content>
<ion-list>
<ion-item menu-close ng-click="login()">
Login
</ion-item>
<ion-item menu-close href="#/app/search">
Search
</ion-item>
<ion-item menu-close href="#/app/browse">
Browse
</ion-item>
<ion-item menu-close href="#/app/playlists">
Playlists
</ion-item>
<ion-item menu-close href="#/app/map">
Map
</ion-item>
<ion-item menu-close href="#/app/markerClick">
Marker
</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
app.js
.config(function ($stateProvider, $urlRouterProvider) {
$stateProvider
.state('app', {
url: '/app',
abstract: true,
templateUrl: 'templates/menu.html',
controller: 'AppCtrl'
})
.state('app.search', {
url: '/search',
views: {
'menuContent': {
templateUrl: 'templates/search.html'
}
}
})
.state('app.browse', {
url: '/browse',
views: {
'menuContent': {
templateUrl: 'templates/browse.html'
}
}
})
.state('app.playlists', {
url: '/playlists',
views: {
'menuContent': {
templateUrl: 'templates/playlists.html',
controller: 'PlaylistsCtrl'
}
}
})
.state('app.single', {
url: '/playlists/:playlistId',
views: {
'menuContent': {
templateUrl: 'templates/playlist.html',
controller: 'PlaylistCtrl'
}
}
})
.state('app.map', {
url: '/map',
views: {
'menuContent': {
templateUrl: 'templates/map.html',
controller: 'MapCtrl'
}
}
})
.state('app.markerClick', {
url: '/markerClick',
view: {
'menuContent': {
//templateUrl: '<h1>what the hello</h1>',
templateUrl: 'templates/testTemplate.html',
controller: 'markerClickCtr'
}
}
});
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/app/map');
});
enter image description here
enter image description here
Try to replace href with ui-sref="app.markerClick"
UI-Router provides ui-sref which allows to link to states. This is different than linking to a normal URL. When using UI-Router you want to link to a state, not a URL.
Hello I have a problem...
.state('tabs', {
url: '/tabs',
abstract: true,
templateUrl: 'templates/tabs.html'
})
.state('tabs.personal', {
url: '/personal',
views: {
'personalGoals-view': {
templateUrl: 'templates/personalGoals.html',
controller: 'personalCtrl'
}
}
})
.state('tabs.personal.personalview', {
url: 'tabs/personal/personalview',
views: {
'personalview-view': {
template: 'hello',
controller: 'personalViewCtrl'
}
}
})
and this is my link:
<ion-view view-title="PersonalGoals">
<ion-content class="has-footer">
<ion-item ng-repeat="goal in goals" href="#" ui-sref="tabs.personal.personalview">
<span class="goal-lists">{{goal.goaltitle}}</span>
</ion-item>
</ion-content>
</ion-view>
(pound sign)/tabs/personal/personalview doesn't show and goes back to my otherwise link... I don't know why... please help...
Try using ui-sref:
<ion-view view-title="PersonalGoals">
<ion-content class="has-footer">
<ion-item ng-repeat="goal in goals" ui-sref="tabs.personal.personalview">
<span class="goal-lists">{{goal.goaltitle}}</span>
</ion-item>
</ion-content>
</ion-view>
2 things :
When using ui-router use ui-sref="tabs.personal.personalview" it's way better than href.
2nd Your state is a grand children of the state tabs and URL are relative to their parent states. So his full URL would be
<tabs URL>/<tabs.personal URL>/tabs/personal/personalview
If i guessed correctly how you did declare your states this will give something like
tabs/tabs/personal/tabs/personal/personalview
If you click on a link using ui-sref.
I am trying to link to a substate and can't figure out how to get it to work. Here is the link:
<a ui-sref="tab.communityDashboard" class="button button-block button-large"><i class="icon ion-home"></i><br />Community Directory</a>
and here is the route:
.state('tab', {
url: '/tab',
abstract: true,
templateUrl: 'templates/tabs.html'
})
// Each tab has its own nav history stack:
.state('tab.communityDashboard', {
url: '/communitydashboard',
views: {
'tab-communityDashboard': {
templateUrl: 'templates/tab-dash.html',
controller: 'DashCtrl'
}
}
})
and then eventually:
$urlRouterProvider.otherwise('/home');
Here is the content of the view:
<ion-view view-title="tab-communityDashboard">
<ion-content>
yolo yolo yolo
</ion-content>
</ion-view>
I tried also going to localhost:8100/#/communitydashboard but it just redirects me home. How do I fix this.
You need an <ion-nav-view> where you want your view to show up, and since you're using views with your states, you'll need to include the name attribute with the name of the view, so something like <ion-nav-view name="tab-communityDashboard">
http://ionicframework.com/docs/api/directive/ionNavView/
http://learn.ionicframework.com/formulas/navigation-and-routing-part-1/
I am trying to develop the navigation i ionic as follows
AppCtrl to Login or Menu
Then from Menu to Products or Orders or back to Login
My app.html like this
<ion-nav-view name="appContent">
</ion-nav-view>
My menu.html like this
<ion-view>
<ion-side-menus enable-menu-with-back-views="false">
<ion-side-menu-content>
<ion-nav-bar class="bar-stable">
<ion-nav-back-button>
</ion-nav-back-button>
<ion-nav-buttons side="left">
<button class="button button-icon button-clear ion-navicon" menu-toggle="left"></button>
</ion-nav-buttons>
</ion-nav-bar>
<ion-nav-view name="menuContent"></ion-nav-view>
</ion-side-menu-content>
<ion-side-menu side="left">
<ion-header-bar class="bar-stable">
<h1 class="title"></h1>
</ion-header-bar>
<ion-content>
<ion-list>
<ion-item nav-clear menu-close href="#/app/products">
Products
</ion-item>
<ion-item nav-clear menu-close href="#/app/orders">
Orders
</ion-item>
<ion-item nav-clear menu-close ng-click="logout()">
Logout
</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
</ion-side-menus>
</ion-view>
And my state configurations are like this
$stateProvider
.state('app', {
url: "/app",
abstract: true,
templateUrl: "app/views/app.html",
controller: 'AppCtrl'
})
.state('app.login', {
url: "/login",
views: {
'appContent': {
templateUrl: "app/views/login.html",
controller: 'LoginCtrl'
}
}
})
.state('app.menu', {
url: "/menu",
views: {
'appContent': {
templateUrl: "app/views/menu.html",
controller: 'MenuCtrl'
}
}
})
.state('app.products', {
url: "/products",
views: {
'menuContent': {
templateUrl: "app/views/products.html",
controller: 'ProductsCtrl'
}
}
})
.state('app.productdetail', {
url: "/projects/:productid",
views: {
'menuContent': {
templateUrl: "app/views/productdetail.html",
controller: 'ProductDetailCtrl'
}
}
});
In the AppCtrl I'am navigating to Login or Menu.
It navigates to menu.html succefully,
After that when I select the products or orders it is not further navigating.
I noticed the menuContent navigation view is hosted inside the appContent navigation view.
Is ionic supports this kind of hierarchical navigation?
Please find the codepen here code
When using these kind of hierarchical views, we need to specify under which state the view needs to be rendered. Changing the below line of code in your example, will load the Products page properly.
.state('app.products', {
url: "/products",
views: {
'menuContent#app.menu': {
templateUrl: "templates/products.html",
controller: 'ProductsCtrl'
}
}
});
Notice the change in the view name, menuContent#app.menu this would specify the router to render the products view under menu state. Read through more on this in original documentation https://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views
I am using ionic framework's sidemenu project to build something on top of it.
I have created this plunker to demonstrate my problem.
In the plunker, on the join page, when you click home, it shows blank screen. I can see that the HTML elements of sidemenu are all there, however, it doesnt showup on screen.
If I change my sidemenu with tabs, it works fine.
Does anyone know whats going on?
My sidemenu template looks like this:
<ion-side-menus>
<ion-pane side-menu-content>
<ion-nav-bar class="bar-dark nav-title-slide-ios7">
<ion-nav-back-button class="button-clear"><i class="icon ion-ios7-arrow-back"></i> Back</ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view name="menuContent" animation="slide-left-right"></ion-nav-view>
</ion-pane>
<ion-side-menu side="left">
<header class="bar bar-header bar-dark">
<h1 class="title">Menu</h1>
</header>
<ion-content class="has-header">
<ion-list>
<ion-item nav-clear menu-close ui-sref="home">
Search
</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
</ion-side-menus>
My states looks like this:
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('app', {
//url: "/app",
abstract: true,
templateUrl: "tpl.tabs.html",
controller: 'AppCtrl'
})
.state('join', {
url: "/join",
views: {
'': {
templateUrl: "tpl.join.html",
controller: 'joinCtrl'
}
}
})
.state('home', {
parent: 'app',
url: "/app",
views: {
'home': {
templateUrl: "tpl.home.html",
controller:'homeCtrl'
}
}
})
.state('menu', {
parent: 'app',
url: "/menu",
views: {
'menuContent': {
templateUrl: "tpl.home.html",
}
}
})
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/join');
})
You had several misconceptions in your code here is how it works properly.
First of all, I recommend you to use the newest version of Ionic.
Then make sure you use the
<ion-side-menu-content></ion-side-menu-content>
and the parent/child view function of the ui-router with dot notation, for example:
$stateProvider
.state('app', {
url: "/app",
abstract: true,
templateUrl: "tpl.tabs.html",
controller: 'appCtrl'
})
.state('app.join', {
url: "/join",
views: {
'menuContent': {
templateUrl: "tpl.join.html",
controller: 'joinCtrl'
}
}
});
I solved it myself.
The problem was with the naming of views of the states, which should match with the
ion-nav-view name in the abstract template.
The updated solution is here