I have done some research but couldn't find a definitive answer. I have main application area where I load different screens. From one screen I want to open a page that would cover the whole screen. So, navigating to 'viewreport' does exactly that. And when I click on Browser's Back button or have my own Back button on the whole screen page I want to get back to the previous state without reloading its template and controller. Another words, I want to see all selections I have done prior opening the whole screen page. Here is my state configuration:
$stateProvider
.state('body', {
url: '/',
abstract: true,
template: '<div ui-view />'
})
.state('viewreport', {
url: 'viewreport',
templateUrl: 'wholescreen.html',
controller: 'wholescreenController'
});
I am loading different modules into the main 'body' state which might look like this:
function ($stateProvider) {
$stateProvider.state('body.htmlreports', {
templateUrl: function ($stateParams) {
return 'htmlReports.html';
},
controller: 'htmlReportsController',
url: 'htmlreports',
}).state('body.htmlreports.reportarea', {
templateUrl: 'htmlReportParams.html',
controller: 'htmlReportParamsController',
});
I am navigating to viewreport state from htmlReportParamsController controler. The new page then opens into the whole screen. That part works fine. But navigating back to htmlreports when clicking on the Browser's Back button will reload 'body.htmlreports' state. Is there a way of getting back to it without reloading its template?
Update. Why I think it's not a duplicate.
I tried what's suggested in it before posting. This: $state.transitionTo('yourState', params, {notify: false});
still reloads 'yourState'. Also the use case in the provided link is not exactly as mine. Because the OP uses edit mode for already loaded view while I am loading a new view over the the whole screen.
Thanks
Use
$window.history.back();
Add $window in dependency injections of your controller. This will refresh your page and wont reload data we selected.
Please maintain states like this
function ($stateProvider) {
$stateProvider.state('body.htmlreports', {
templateUrl: function ($stateParams) {
return 'htmlReports.html';
},
controller: 'htmlReportsController',
url: 'htmlreports',
}).state('body.htmlreports.reportarea', {
templateUrl: 'htmlReportParams.html',
controller: 'htmlReportParamsController',
}).state('body.htmlreports.reportarea.viewreport', {
url: 'viewreport'
});
Related
I'm currently trying ionic with the tab template. I got to the stage where I have a second-level tab in one of my main tabs.
.state('tab.leaderboard', {
url: "/leaderboard",
abstract:true,
views: {
'tab-leaderboard': {
templateUrl: "templates/tab-leaderboard.html",
controller: 'LeaderboardCtrl'
}
}
})
.state('tab.leaderboard.players', {
url: "/players",
views: {
'leaderboard-page': {
templateUrl: "templates/players-leaderboard.html",
controller: 'PlayersCtrl'
}
}
})
.state('tab.leaderboard.teams', {
url: "/teams",
views: {
'leaderboard-page': {
templateUrl: "templates/teams-leaderboard.html",
controller: 'TeamsCtrl'
}
}
})
If I use a direct link to my tab tab.leaderboard.teams, the url on the address bar changes, the bar title changes but the content is not loading and the current page from where I made the call stays opened.
However if I click on a link to tab.leaderboard.teams, it works perfectly.
Also if I switch the tabs on my html and make the teams tab first then it works for teams and not for players.
Note that if I go manually to the tabs then everything is fine. The problems happens only when I use href to open it.
Any help would be appreciated.
EDIT
I also used ng-click='func()' and then on my controller used $state.go('tab.leaderboard.teams') it didn't work. Same for ui-sref on my html. The url changes but not the content.
angular-ui-router is based on states. If you want to go from one state to another then you have to use "ui-sref" or "$state.go()"
for example :
<a ui-sref="stateName">to go page</a>
I want to temporarily change the browser url when the ui bootstrap modal is opened ( The page behind should remain as is, only the url changes ). When the modal is closed the url should be reverted back to the original one.
Steps :
User loads the page
url : xyz.com/home
User clicks a link opens a modal
url : xyz.com/detail/123
possible solution : changing url with html5 push state
problem : Angular ui-router tries to run its routes as per the changed url, eventually changing the background page.
User closes the modal
url : xyz.com/home
possible solution : html5 pop state
problem : Reloads the background page, which kills the purpose
Example implementation : Pinterest pins and their pin details popup.
You can use ui-router-extras sticky state to solve your problem. There is simple example with modal by the link. You should create two named views, one for main content (background) and one for modal.
<div ui-view="app"></div>
<div ui-view="modal"></div>
Mark the state, from what you want to access to modal as sticky: true in route definition.
.state('main', {
abstract: true,
url: '/',
templateUrl: '_layout.html'
})
.state('main.index', {
url: '',
sticky: true,
views: {
'app': {
templateUrl: 'index.html'
}
}
})
.state('main.login', {
url: 'login/',
views: {
'modal': {
templateUrl: 'login.html'
}
}
})
Also add an event for stateChangeSuccess:
$rootScope.$on('$stateChangeSuccess', function (ev, to, toParams, from, fromParams) {
if ((from.views && !from.views.modal) || !from.views) {
$rootScope.from = from;
$rootScope.fromParams = fromParams;
}
});
so, when you need to close modal, you can just
$state.go($rootScope.from, $rootScope.fromParams);
There is small problem for that solution. If you reload page on the modal state, then the app ui-view will be empty.
This can be achieved by having a nested state and triggering the modal using onEnter callback:
$stateProvider
.state('contacts', {
url: '/home',
templateUrl: 'home.html',
controller: function($scope, MyService){
$scope.contacts = MyService.getContacts();
}
})
.state('contacts.details', {
url: "^/details/:id", // using the absolute url to not have the "/home" prepended
onEnter: function($state, $uibModal) {
var modal = $uibModal.open({
templateUrl: 'details.html',
controller: function($scope, $stateParams, MyService) {
// get data from service by url parameter
$scope.contact = MyService.getContact($stateParams.id);
}
});
modal.result.finally(function() {
$state.go('^'); // activate the parent state when modal is closed or dismissed
});
}
});
This technique is described in the ui-router's FAQ.
Here the plunk. In this example the modal's scope is created as a child of the $rootScope - the default $uibModal's behavior when no scope is passed to it. In this case we should use the service in the modal's controller to obtain the data by url parameter.
To have master and details URLs look like these - xyz.com/home and xyz.com/detail/123 - we should use the absolute URL (^/details/:id) in the child state.
Using this solution you can open the detail URLs directly and still have both, master and detail states, activated properly, so sharing the detail URL is possible.
I think you can achive that with ngSilent module
https://github.com/garakh/ngSilent
using $ngSilentLocation.silent('/new/path/');
(once you open modal and again after closing it)
Managed to implement this using https://github.com/christopherthielen/ui-router-extras/tree/gh-pages/example/stickymodal
I debated a while on this but I got a Plunk that reproduce it.
I have a state "Contact" that get loaded by default. with $state.transitionTo
Inside that state I have some views, they all get loaded and everything work.
If I click to change the state to "Home" by default or by "ui-sref" and in the "Home" state/template I have ui-sref="contacts". When we click back to set the state to contacts it should work, but all the sub views are now not being called properly.
It seems that when ui-sref call the state this one behave differently that when it is loaded by default.
Why $state.transitionTo(''); seems to work differently than ui-sref.
<script>
var myapp = angular.module('myapp', ["ui.router"])
myapp.config(function($stateProvider, $urlRouterProvider){
// For any unmatched url, send to /
$urlRouterProvider.otherwise("/")
$stateProvider
.state('home', {
templateUrl: 'home.html',
controller: function($scope){
}
})
.state('contacts', {
templateUrl: 'contacts.html',
controller: function($scope){
}
})
.state('contacts.list', {
views:{
"":{
template: '<h1>Contact.List Working wi no Data defined.</h1>'
},
"stateSubView":{
template: '<h2>StateSubView Working</h2>'
},
"absolute#":{
template: '<h2>Absolute item</h2>'
}
}
});
});
myapp.controller('MainCtrl', function ($state) {
$state.transitionTo('contacts.list');
})
Q2:
Why is the Absolute tag that is under contact work when I add the view in the Index, but is not working when it is inside the contact.html file. Absolute reference work only with the Index and not if called everywhere?
"absolute#":{
template: '<h2>Absolute item</h2>'
}
I saw that in index.html you have an empty ui-view tag. What do you expect to go there? I think you can not do this. The router just doesn't know with which state (home or contacts) it should replace. Apparently it picks the second one (contacts). I'd suggest to put url: '/' in the home state and you'll see the difference.
This is for sure one issue.
Other than that:
You can't simply access views from contacts.list in contacts afaik.
The empty ui-view work as a wild card and can be use to switch across multiple route even if we have nested element. But if we have a nested view contact.list it can only be access if we put the whole path in ui-sref="contacts.list" because the list child of contact cannot be access only by using ui-sref="contacts"
I have a home screen with a list of groups. Each list item links to the same abstract state with a parameter (gid, from groupid).
.state('group', {
url: "/group/:gid",
abstract: true,
templateUrl: "templates/group.html"
})
.state('group.members', {
url: '/members',
views: {
'group-members': {
templateUrl: 'templates/group-members.html',
controller: 'MemberCtrl'
}
}
})
.state('group.events', {
url: '/events',
views: {
'group-events': {
templateUrl: 'templates/group-events.html',
controller: 'EventCtrl'
}
}
})
.state('group.settings', {
url: "/settings",
views: {
'group-settings': {
templateUrl: "templates/group-settings.html",
controller: 'SettingsCtrl'
}
}
})
In that abstract state I have 3 tabs that should work on the same parameter/group. While this works well for the tab that I link to from the home screen, the other tabs remember their history and after going back to the home screen and selecting another group only the linked to tab shows the details for the correct group. The other tabs will show details for the previously (cached) group.
I think this might be fixed with clearing the cache somewhere, but ideally I do not want to clear it each time for each tab. While navigating between tabs in the same group the cache should be used. Only when going back to the home screen and after a new group is selected should the cache of the tabs be cleared.
An alternative might be to somehow make the other views aware that a new group has been selected. For the tab that is linked to that is easy: the parameter is given in the url. But the others are not linked to from the home screen. Is there a way to pass an argument to ion-tabs in a template file?
What is the best approach for getting this to work? This must be a use case that occurs now and then and I suspect there is a preferred way for handling it. I am using Ionic 1.0.0. Thanks.
The group-members view was being updated, but the rest of the groups view was stale. By adding cache: false to the state in the codepen below it worked fine.
http://codepen.io/whiskeyjack/pen/BNmpMx
javascript
.state('group', {
url: "/group/:gid",
abstract: true,
cache: false,
templateUrl: "templates/group.html"
})
See also $ionicHistory.clearCache() at http://ionicframework.com/docs/api/service/$ionicHistory/
Use this way to clear cache in ionic
<ion-view cache-view="false" view-title="My Title!"> ... </ion-view>
I have an AngularJS application that makes use of the new, state-based ui-router. I have three different views in my application, where one is a top-level views, and the other two are nested ones.
The structure basically is as follows:
/ => Top-level view
/foo => Abstract view, loads a view that contains a ui-view placeholder
/foo/bar => View for the placeholder
/foo/baz => View for the placeholder
The router is set up as following:
app.config(['$urlRouterProvider', '$stateProvider', function ($urlRouterProvider, $stateProvider) {
'use strict';
$urlRouterProvider
.when('/bar', '/foo/bar')
.otherwise('/');
$stateProvider
.state('home', {
url: '/',
views: {
'': {
controller: 'homeController',
templateUrl: '/home/homeLayout.html',
},
'firstHomeView#home': {
templateUrl: '/home/firstHomeView.html'
},
'secondHomeView#home': {
templateUrl: '/homme/secondHomeView.html'
}
}
})
.state('foo', {
abstract: true,
templateUrl: '/foo/fooLayout.html',
controller: 'fooController'
})
.state('foo.bar', {
url: '/foo/bar',
templateUrl: '/foo/barView.html',
controller: 'barController'
})
.state('foo.baz', {
url: '/foo/baz',
templateUrl: '/foo/bazView.html',
controller: 'bazController'
});
The problem is, that basically everything works as expected when you click around or manually type in urls, but that it does not work when using the back / forward buttons of the browser.
E.g., is you go to /foo, you are taken to /foo/bar, as expected. When you then click on a link to go to /foo/baz, everything is fine. Then click a link that takes you to /, and everything is still fine.
If you now hit the back button, you are taken back to /foo/baz (which is correct), but only the /foo/fooLayout.html view is rendered, not its sub-view /foo/bazView.html. The strange thing is now that if you hit the back button again, you are taken to /foo/bar and it renders correctly, including its subview! It seems as if nested views weren't recognized when using the back button, at least, if you enter an abstract view at the same time.
$locationProvider.html5Mode is not enabled, but enabling it doesn't make any difference.
I am using AngularJS 1.0.5 and ui-router 0.0.1-2013-03-20.
Any ideas what might cause this issue, and how I might solve it?
I found the error: In the view fooLayout.html I was using ng-view instead of ui-view. Once I changed that, everything was fine :-)