user3125823 user3125823 - 1 year ago 70
AngularJS Question

UI Router Query Parameters with Named Views

I am having trouble with using query parameters with UI Router for a small search app.

Its real simple right now until I better understand Angular, just a home and results page. Home page just has a search box on it with autocomplete functionality. Search page has same search box and then results. On my search box, I have ng-submit on the button which calls search(). In search(), I have $state.go('state', {q: 'searchTerms'}), searchTerms being my ng-model on the input.

Going from the home page to results page, url stays the same:


INSTEAD OF http://localhost:8000/app/search?q=usertypedinput


My states (routes)

.state('home', {
url: '/home',
templateUrl: 'home/home.html', controller: 'homeCtrl'})
.state('search', {
url: '/search?q',
views: {
'' : { templateUrl: 'search/search.html', controller: 'searchCtrl' }
//add more views here when necessary

As you can see I'm using named views INSTEAD of nested views. A lot of examples use nested views, so I'm curious to know if that is causing the issue or if I'm missing something?

Would it be better to use nested views with a search app?

Answer Source

I figured it out, everything was correct except for some stinking syntax in state.go :((

$state.go('search', {q: 'searchTerms'});


$state.go('search', {q: $scope.searchTerms});

searchTerms WITHOUT the single quotes AND $scope

HTH anyone else not waste time on something so simple.