Hello I am having a problem with the back button in my project. One of the views is a newsfeed, when i click a news item to see the full content I go to the respective view. In this view i display the full content of the news and a back button.
This is the router config for this 2 views :
$stateProvider
.state('app', {
url: "/app",
abstract: true,
templateUrl: "templates/menu/html/menu.html",
controller: 'menuCtrl'
}) //root
.state('app.news-full-list', {
url: "/news",
params:{
isAnimated:true
},
views: {
'menuContent': {
templateUrl: "templates/cholnews/news_full.html",
controller: 'newsCtrl'
}
}
}) // news feed
.state('app.details', {
url: '/news_details',
views: {
'menuContent': {
templateUrl: 'templates/cholnews/news_details.html',
controller: 'detailsCtrl'
}
}
}); //news details
To display the back button in the details view i use this script as suggested in ionic page:
appControllers.controller('detailsCtrl', function ($scope, $ionicHistory) {
$scope.myGoBack = function() {
$ionicHistory.goBack();
};
});
when I go inside details the back button is displayed but does not work when clicked.It looks like the history is empty!
Any idea how t solve this ?
I think that you just put the myGoBack function in the detailsCtrl, you should link a button in the view to that function to perform that action
as you have mentioned : app.news-full-list state contain list..whose root view is "app". and when u click on any item,it opens app.details details, whose root view is also app.these makes change in view history.
so,just try this:
.state('app.news-full-list.details', {
url: '/news_details',
views: {
'menuContent': {
templateUrl: 'templates/cholnews/news_details.html',
controller: 'detailsCtrl'
}
}
});
now, app.news-full-list.details shows that details have news-full-list is root view.
hope this helps you.!
Related
I have a 'home' view a 'messaging' view and a 'conversations' view. I want the 'home' view to always show the 'messaging' view. That's the easy part and I've done that in the code below. But when the user clicks on a link in the 'messaging' view I want to:
Navigate to the 'conversations' view (which the sample below does).
or
Show the 'conversations' view as a child of 'messaging'.
Here is a link to what I have so far. I have spent quite a bit of time trying to get this to work and haven't been able to get it to do both '1' and '2'. Here is my current state configuration. You can see the full example at this link:
http://plnkr.co/edit/eVhPAr4zGmsbiNUKdzz3?p=preview
homeApp.config(function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/');
$stateProvider
.state('home', {
url: '/',
views: {
'': { templateUrl: 'home.html', controller: "homeController" },
'messaging#home': { templateUrl: 'messaging.html', controller: "messagingController" }
}
})
.state('conversations', {
url: '/conversations',
views: {
'': { templateUrl: 'conversations.html', controller: "conversationsController" }
}
})
});
Then you can try to use nested states or nested views to do it.
I'm not sure it's the way you want to do it but look at this plunker, it does the job using nested state like this :
.state('home.nestedView', {
url: '/nestedView',
views: {
'': { templateUrl: 'conversations.html' }
}
})
In Ionic I got a slider in one tab. On click on a slide I want to jump to a subpage on another tab. I achieve that using
$state.go('^.station', {stationId:clickedSlide});
I get to view alright, but there is no back button to the root view (.stationen) of this tab. It seems to clear the entire historyStack of this tab. Even if I try to first jump to .stationen first and then to .station I do not get a back button.
My stateProvider looks like so:
.config(function($stateProvider, $urlRouterProvider) {
$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.map', {
url: '/map',
views: {
'tab-map': {
templateUrl: 'templates/tab-map.html',
controller: 'MapController'
}
}
})
.state('tab.stationen', {
url: '/stationen',
views: {
'tab-stationen': {
templateUrl: 'templates/tab-stationen.html',
controller: 'StationenCtrl'
}
}
})
.state('tab.station', {
url: '/stationen/:stationId',
views: {
'tab-stationen': {
templateUrl: 'templates/tab-station.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/map');
});
I tried setting options in my $state.go() call but to no avail. Also nesting the .station in .stationen did not get me any results. What am I missing?
Consider the layout below:
I've got two views, view A and view B. I'm trying to load user menu in A view and menu contents in B view.
I tried this:
First I loaded my menu in A view, then when I tried to view a menu , ui-router will make A view empty and load B view.
How could I hold A view state while B view state is changing?
Perhaps the way I'm doing this is totally wrong.
Update 1:
Here is my route config:
$stateProvider
.state("login", {
url: "/login",
views: {
"login": {
templateUrl: "./static/views/login.html",
controller: loginController
}
}
})
.state("dashboard", {
url: "/dashboard",
views: {
"view-a": {
templateUrl: "./static/views/dashboard.html"
}
}
})
.state("test", {
url: "/test",
views: {
"view-b": {
templateUrl: "./static/views/test.html"
}
}
});
It seems you want B to be a nested view of A. There a few differernt ways to achieve this, here are the docs https://github.com/angular-ui/ui-router/wiki/Nested-States-and-Nested-Views
This approach will give a possible route to view B at /dashboard/test
$stateProvider
.state("login", {
url: "/login",
views: {
"login": {
templateUrl: "./static/views/login.html",
controller: loginController
}
}
})
.state("dashboard", {
url: "/dashboard",
views: {
"view-a": {
templateUrl: "./static/views/dashboard.html"
}
}
})
.state("dashboard.test", {
url: "/test",
views: {
"view-b": {
templateUrl: "./static/views/test.html"
}
}
});
Inside dashboard.html you can reference view-b by having <div ui-view="view-b"></div>
I am writing an AngularJS Application using ui-router. The states 'home' and 'book' are loaded into the (parent) - ui-view element
My setup for the routes is as following :
.config(function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise("/home");
$stateProvider
.state('home', {
url: '/home',
templateUrl: '/home2/app'
})
.state('book', {
url: '/book',
templateUrl: '/book/index'
})
.state('book.overview', {
url: '/overview',
templateUrl: '/book/overview'
})
.state('book.edit', {
url: '/edit/:bookid',
templateUrl: '/book/detail',
controller: 'bookeditcontroller'
})
.state('book.create', {
url: '/create',
templateUrl: '/book/detail',
controller: 'bookeditcontroller'
});
});
When the user tiggers the 'book' state (through a href), the template from '/book/index' is loaded and displayed successfully. But on this first request, i also want to load the template from '/book/overview' and displaying it in the child ui-view.
i've already read the topics about the default states under https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#how-to-set-up-a-defaultindex-child-state
But this is not exactly the behavior i want. Is there a way to tell ui-router when parent state 'book' is loaded, also load 'book.overview' into its (child) ui-view ?
Thanks for you help!
I would say that you will need
Multiple Named Views
This allows us to think in one state - many views
State would look like this
.state('book', {
url: '/book',
views : {
'' : { templateUrl: '/book/index', },
'#book': {templateUrl: '/book/overview' },
}
})
this way, we will place two views into one state.
The first will be injected into index.html/root <div ui-view=""></div>
The second will be placed inside of the templateUrl: '/book/index',
That's how we can play with many views in one (or even more parent, grand parent...) state.
I created a plunker with layout, which does show a bit similar example. The code snippet of the state with many views is:
$stateProvider
.state('index', {
url: '/',
views: {
'#' : {
templateUrl: 'layout.html',
controller: 'IndexCtrl'
},
'top#index' : { templateUrl: 'tpl.top.html',},
'left#index' : { templateUrl: 'tpl.left.html',},
'main#index' : { templateUrl: 'tpl.main.html',},
},
})
In story form:
What I am looking for here is a master-detail setup. The master is in list form and when I click on a link (relative to a particular row/record (or Account in this case)) I want to see the details in the main view (literally, the "main" view: <div class="container" ui-view="main"></div>).
I want to do this and maintain my URL structure (/accounts for the list of Accounts; /accounts/:id for the detailed version) but I want the detail view to use the view that the list was using.
What I currently have
index.html
...
<div class="container" ui-view="main"></div>
...
accounts.js
$stateProvider
.state ('accounts', {
url: '/accounts',
views: {
'main': {
controller: 'AccountsCtrl',
templateUrl: 'accounts/accounts.tpl.html'
}
},
data: { pageTitle: 'Account' }
})
.state ('accounts.detail', {
url: '/:id',
views: {
'main': {
controller: 'AccountDetailCtrl',
templateUrl: 'accounts/detail.tpl.html'
}
},
data: { pageTitle: 'Account Detail' }
});
At this point, the /accounts route works as expected. It displays accounts/accounts.tpl.html correctly in the main view. In that html each line in the repeater links it to its appropriate /accounts/:id URL, which I am handling with the nested state accounts.detail.
What is probably obvious to the majority of you who know more than me about this, my accounts.detail will render to the view main if that named view exists in the template accounts/accounts.tpl.html. That is indeed true.
But that is not what I want. I want the accounts.detail stuff to render in the parent main view; I want the html of accounts/detail.tpl.html to replace the html of accounts/accounts.tpl.html found in index.html: <div class="container" ui-view="main"></div>.
So how could I accomplish this?
MY SOLUTION IN CONTEXT
The trick is, as the answer says, to set up the URL scheme to identify which child state is "default". The way I interpret this code in plain English is that the parent class is abstract with the proper URL and the "default" child class has the "same" URL (indicated by '').
If you need further clarity, just post a comment and I'll share any more guidance.
.config(function config( $stateProvider ) { $stateProvider
.state ('accounts', {
abstract: true,
url: '/accounts',
views: {
'main': {
templateUrl: 'accounts/accounts.tpl.html',
controller: 'AccountsCtrl'
}
},
data: { pageTitle: 'Accounts' }
})
.state ('accounts.list', {
url: '',
views: {
'main': {
templateUrl: 'accounts/list.tpl.html',
controller: 'AccountsListCtrl'
}
},
data: { pageTitle: 'Accounts List' }
})
.state ('accounts.detail', {
url: '/:id',
views: {
'main': {
templateUrl: 'accounts/detail.tpl.html',
controller: 'AccountDetailCtrl'
}
},
data: { pageTitle: 'Account Detail' }
});
Sounds like you simply don't want the views to be hierarchical. To do this, simply change the name of the second state to detail.
Note however, that in doing so you will lose any hierarchical properties of the state tree (the controller code state of accounts for example).
If you want to keep the controllers hierarchical, but perform a replace of the html, I would create another parent above both others that takes care of the controller logic, but only has an extremely simple view <div ui-view=""></div>.
For example:
$stateProvider
.state('app', { url: '', abstract: true, template: 'parent.html', controller: 'ParentCtrl' })
.state('app.accounts', { url: '/accounts', templateUrl: 'accounts.tpl.html', controller: 'AccountsCtrl' })
.state('app.detail', { url: '/accounts/:id', templateUrl: 'detail.tpl.html', controller: 'AccountDetailCtrl' });
You can use '#' to define an absolute path to the ui-view of your choice. For example: "detail#contacts" : { }, where this absolutely targets the 'detail' view in the 'contacts' state. within contacts.html
Source: https://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views