back button : keeping filter value

[Thierry Chatel]

I have a list and a filter input field, just as in the documentation :  http://docs-next.angularjs.org/api/angular.module.ng.$filter.filter

I enter some text to filter the list items, then click on one of the items to view details page. When I go back from the details page to the list, using the browser back button, I would like to retrieve my list page with the same filter value.

The browser keeps the values of the html page fields, but Angular bindings overwrites them at loading from the controller values.

Is there an easy way to keep the value in the html input field and update the controller property from it, rather than overwrite the html input field by the controller property value ? 

[Misko Hevery]

could you create a simple JSFiddle example?

General answer is that angular only keeps what is in the URL when you hit the back button. If you want to have extra data, you need to store it in either a service., or if it is the same controller then look at reloadOnSearch here http://docs-next.angularjs.org/api/angular.module.ng.$route which will let you keep the controller instance and with it the state of the model.

-- Misko

--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To view this discussion on the web visit https://groups.google.com/d/msg/angular/-/O_nDk8ZPCgYJ.
To post to this group, send email to ang...@googlegroups.com.
To unsubscribe from this group, send email to angular+u...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/angular?hl=en.

[ThomasBurleson]

@Misko,

Does that mean the Controller instances can be cached and reused?

e.g.
If I navigate to page1 (with Cntrl1), then to page2 (with Cntrl2),
then back to page1... I will be using the same/previous instance of
Cntrl1 ?

My impression is no since we should store state in services.

On Feb 2, 11:55 am, Misko Hevery <mi...@hevery.com> wrote:
> could you create a simple JSFiddle example?
>
> General answer is that angular only keeps what is in the URL when you hit
> the back button. If you want to have extra data, you need to store it in
> either a service., or if it is the same controller then look at

> reloadOnSearch herehttp://docs-next.angularjs.org/api/angular.module.ng.$routewhich will let

[Thierry Chatel]

@Thomas : no, going back to a previous page completely recreates a new controller.

@Misko : I made an example with a partial solution : http://jsfiddle.net/tchatel/a8674/

I created a directive that get the value in the HTML field, and updates the associated scope property from it. So it allows to initialize the property from the HTML field, instead of initializing the HTML field from the property.

It works great... in that simple example, but not in my real application :-(
I suppose it's because in my application I have the filter field inside a ng:view, and that the creation of the ng:view content when going back to that page looses the old HTML field value. But it's just an hypothesis. Well, as all HTML fields inside the ng:view are not retrieved going back to that page, even the not binded ones, it's rather convincing, but I don't know why.

I could get round this problem with a small hack, copying the filter value in an hidden field outside the ng:view. It's working, but it's not very clean. I will try to understand what happen with the back form values inside the ng:view, but if someone has an idea...

[Witold Szczerba]

What about storing the filter value in address bar?
For example: yourapp/#/items?filter=abcdefg

So, when user clicks back button, the filter can be re-build.

[Thierry Chatel]

Yes, I thaugth about storing the filter value in the address bar. Re-building the filter from the address would be easy.

But modifying the current adress adds each time an item in the browser history, which disturbs the expected back button behaviour. I prefer to add items in browser history only when page changes.

[Witold Szczerba]

In that case you have two options:
1) store it in location's search only on route change,
2) bind filter to a field in a service.

Both ways are very simple to implement (router fires change events).
#2 has one drawback though:
1) user opens a page, type something in a filter,
2) angular binds it to a filed in some service object,
3) user navigates somewhere else,
4) user reloads a page,
5) user goes back and there is no filter value.
That happens because reloading a page === restarting application.

So, you have to store your filter in something which survives page
reloads. You can also use local storage when browser supports it.

> --
> You received this message because you are subscribed to the Google Groups
> "AngularJS" group.
> To view this discussion on the web visit

> https://groups.google.com/d/msg/angular/-/9nmcCBTaYuoJ.

[Madhav Patel]

I am also having the same issue. Has anybody find a solution for this one? 

[Sander Elias]

Hi Madhav,

What issue do you have that is not resolved in this thread?

Regards

Sander

[Madhav Patel]

I am having a page which contains some filters and search button. On search click, it gives me soem results and on clicking one of the result, it redirects to another page using service to get some of the values to another page. Now when I click browser back button, I got the previous page fresh from server instead of getting the same page with search results. How can I keep history in that scenario?

Any help?

Thanks.

On Thursday, 2 February 2012 03:53:36 UTC-8, Thierry Chatel wrote:

[dinesh kumar]

hi madhav,

use route provider. reference link here.

Thanks

Dinesh kumar.L

[Madhav Patel]

@Dinesh: Will it redirect me to the previous page with search result on the page or will it be the fresh page from the server? 

Can you give some piece of code?

Thanks.

On Thursday, 2 February 2012 03:53:36 UTC-8, Thierry Chatel wrote: