how to handle simple form submit with ui-router

541 views

Skip to first unread message

David Michael Gang

unread,

Feb 12, 2015, 1:43:27 AM2/12/15

to ang...@googlegroups.com

Hi,

This is a crosspost from:

https://stackoverflow.com/questions/28455989/how-to-handle-simple-form-submit-with-ui-router

My general question is how do i bind between query parameters and urls.
The big feature of angular is that it is declarative.
I would like in the most declarative and elegant way to bind between query parameters and urls in order to provide deep links.

This means that i want to bind state <=> url so that on a change of the state the url will be changed and on the change of the url the state will be changed.

There is the following case: This is the form:

<form name="search-form" ng-submit="searchCtrl.search()">
                            <md-input-container>
                                <input ng-model="searchCtrl.query" >
                            </md-input-container>
  </form>

The state is the following

$stateProvider.state('search', {
                url: '/search?query',
        templateUrl: 'partials/search.html',
                controller: 'SearchController as searchCtrl',
                reloadOnSearch: false
            })

The aim is that on the form submit the url will be changed.

So for example if i am looking for cook i want to have

search?query=cook

This should be a very common example:

After looking for a solution i found the following post:

Set URL query parameters without state change using Angular ui-router

I changed my controller function to:

function search() {
    $stateParams.query = vm.query;
    searchService.search(vm.query);
    $location.search('query', vm.query);
}

The solution looks sub optimal because this should something the ui-router should handle.

The symptom we see is that the back button does not work out the box and i have to listen to $stateChangeSuccess.

Is there a router solution for this?

I am not picky with the router framework solution.

I chose ui-router because it is the most advanced i know.

If there is no simple solution with the ui-router, would it pay to try the new angular router?

Reply all

Reply to author

Forward

0 new messages