I'm using "stateChangeStart" in order to refresh the informations of the connected user .
In the callback, there is a state.go with the url.name (asked state), the parameters and some options.
It work like a charm.
However, when I use the back button, the previous state is displayed but the url doesn't change.
Options are:
$retry:false
inherit:true
location:false
notify:true
relative:null
reload:false
Here the link to the Plunkr:
http://plnkr.co/edit/qRmnmlg1euyWrpvze6nD?p=preview
You have to go to home, home.foo and home.foo.detail for example.
Next, you have to try to back to the previous view then, The view is changed but not the url !
Do you have some suggestions ?
Related
In button click event my state is going to change from one state to another.thats way I am passing Id value by using ui-sref.
this is my button declaration for id:-
<button ui-sref="list({id:'{{id}}'}"></buton>
In state I am getting value like
.state(list, {
url: '/list',
params:{id: 'null'},
template:''
})
The url should not contain id value,thats way i choose the above approach.The param value getting fine in first time loading but when i am going to refreash the page the param value became null again.
My button is in one controller(a.controller.js), and /list is another controller(b.controller.js).After changing state I want id in b.controller.js.
I tried but i was getting a proper solution for this situation except local storage.I donot want to store my value in local storage.So please any one can help me solve this problem.
Its normal to loose everythink when you refresh your page in angularJS (the major intrest of angularJs is that you have not to refresh your page !)
If you want to keep a value you need to store it in a database with an API or in a simpler way you can store it in the localstorage of the users browser.
localStorage.setItem('todos', JSON.stringify($scope.todos));
Exemple of a simple localstorage use in angular
#Katie Harron
If that you call refresh is just state change you have to store your value in $rootScope
I'm developing a site in angular and suppose I have navigated to iphone detail page and its current url is "localhost:8080/iphone/details" .
Now I have to implement a new functionality of applying coupons.In this suppose user clicks on some hyperlink from external site,
"localhost:8080/iphone/details?promotionalCode=12345"
User will land on that page(page will load after that modal will pop up) and a modal pop's up . And here details of promo code i will fetch from query parameter.
But my requirement is if i click cross (dismiss modal) ,and modal closes and state of url should be changed to localhost:8080/iphone/details .
What i have done till now .
I have used $location.search().promocode to fetch promocode if this is valid than modal will pop up and on dismiss modal i'm calling function in which i'm resetting state using $window.location.href , but this is making the whole page getting refreshed. Any suggestion on this ?
You will need to use $location.search().
To get the query parameter ?promotionalCode=12345, you will need to do $location.search('promotionalCode',12345).
Please see: AngularJS Documentation for $location
You can use $stateProvider for this just give the state
Example: .state('app.page', {
url: 'iphone/details',
title: 'Coupon Applied', })
I have an ionic app that has a search template that has a form where you can query posts by keyword. I also have a service that returns the post(s) as a list on another view. All that is working well.
My search controller upon submitting the search form uses:
$state.go('app.search.results', {'searchId': hash});
so that I can have a unique url for that search. I needed this unique url to implement 'back' functionality so that if a user clicks on one of the posts in the list, after viewing the post if they decide to click back, they would get to see the results of the search still (by default they would be returned to the search form without any results anymore).
To allow for a back to search results I implemented a custom back button function and put it on the ionic back button element like this:
<ion-nav-back-button ng-click="goBack()">
and then setup a the custom function:
$scope.goBack = function() {
$window.history.back();
}
All of this works well, I can go back to search results and see them, essentially very much like normal browser back functionality.
Problem for me is that when I have gone all the way 'back' via the back button, my initial state contains the 'Back' button and clicking it does not go anywhere and the 'Back' button still shows. Ionic does pretty good about hiding the back button when it shouldn't be there but in this case not so. Any ideas for how to check when history is exhausted and hiding the back button conditionally would be appreciated.
EDIT:
Here is a jsFiddle ; Note: open fiddle in a new, separate tab to see back button issue. FYI Search is in the menu.
One of the few qualms I have with Ionic is their "smart" navigation. I have run into a lot of problems with this myself. My solution was to create a back button of my own, this back button stores previous states and their params so you can go back and not lose search results for example with your scenario.
This component gives you both a back button and breadcrumbs to use (or you can just use back button)
It is open source and feel free to use it!
jscBreadcrumbs
Strange Milk - Breadcrumbs Post
Here is your jsFiddle with the jscBreadcrumbs implemented and working:
jsFiddle
jscbreadcrumbs
You use $window.history.back(), I think you should use $ionicHistory.goBack(); instead. It can control the history and view and state in the ionic way.
I'm building a small Angular app and I'm currently using ui-router.
I've hit a problem which looks awfully like a bug in ui-router but I can't be sure as I'm not that familiar with this library. When the user clicks on a specific link, although the correct view state gets loaded as expected, the URL in the address bar doesn't get updated.
I'm using ui-router's ui-sref directive to automatically generate the URL for the state. For example in the checklist list view I use the following code:
<a ui-sref="checklist-phase({ aircraftId: checklist.aircraft, checklistId: checklist.id, phaseSlug: checklist.phases[0].slug })" ng-bind="checklist.name"></a>
I've cut down my app and made it into a Plunker so the problem is hopefully reproducible by others. The issue can also be observed in this video: https://www.youtube.com/watch?v=EW9CFe6LfCw
Reproduction steps:
Go to http://run.plnkr.co/plunks/ZqMIYNU6abEAndAM5nx1/#/aircraft/1/checklists
Click the first link. Notice that the view updates to show the correct state, but the URL remains at /#/aircraft/1/checklists.
What is strange is that navigating back to this state by other means updates the URL perfectly. For example (assuming steps 1 and 2 above have been followed):
Scroll to the bottom and click the Next Phase link. Note that the state changes and the URL updates.
Scroll down on this new view and click Previous Phase. Note that the previous state reloads and this time the URL it updated correctly.
Am I using ui-router incorrectly or doing something else incorrectly to cause this behaviour?
Check here updated version
On your state 'check-lists' you provide ui-sref to 'checklist-phase'
<a ui-sref="checklist-phase({ aircraftId: ...
And the 'checklist-phase' is defined as a child state of 'checklist-detail'
.state('checklist-phase', {
parent: 'checklist-detail',
And the state 'checklist-detail' has controller which calls $state.go
.state('checklist-detail', {
controller: 'ChecklistDetailCtrl',
...
.controller('ChecklistDetailCtrl', function ($scope....
{
$state.go('checklist-phase', {
phaseSlug: checklistData.phases[0].slug
}, {
location: 'replace'
});
Do NOT do that... just remove the $state.go - because you are already navigating to the checklist-phase (see the first lines above) ... check it here
I'm trying to solve a problem. I want that when a perform an action or function in the controller to be saved in the brose history. For example, I want to do this:
Type something in a textbox.
Click a link to call a function that will set the string I typed to a variable in $scope and save it at the browser history.
Do the same as the previous step with a different value.
If I click the "back" button from the browser, I want to display the first value I entered.
I have a very simple example of what I want but I don't know what do I have to add to be able to use the "back" and "forward" button from the browser.
http://jsfiddle.net/XMFua/
Thank you very much in advance!
You should use the $location service to set the URL. I don't know how to make it work on jsFiddle, however the following should work:
http://jsfiddle.net/marcenuc/BSDxG/