user3125823 user3125823 - 1 year ago 89
AngularJS Question

AngularJS query parameters

I have a small search app using UI Router that looks like this:

'use strict';

angular.module('searchApp.routes', ['ui.router'])
.config(['$stateProvider', '$urlRouterProvider', '$locationProvider', function($stateProvider, $urlRouterProvider, $locationProvider) {


.state('home', {
url: '/home',
templateUrl: 'home/home.html',
controller: 'SearchCtrl'})
.state('search', {
templateUrl: 'search/search.html',
url: '/search?q',
controller: 'SearchCtrl'

So as you can see two (2) states, two(2) templates and one(1) controller. What is NOT WORKING CORRECTLY is that from the home state to the search state, the search functionality requires 2 submissions for results to display and the same is required on the search state if the user wants to enter a different query.

The query is displaying in the url as desired but then it takes another submission for the results to display...?

I initialize
like this in my

$scope.searchTerms = $stateParams.q || '';

where searchTerms is my ng-model on the search form.

I have
setup like this in my
in the search function

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

What am I missing and/or doing wrong?

Answer Source

Change url: '/search?q', to url: '/search/:q' and try getting the value from $stateParams.q

 .state('search', {            
        templateUrl: 'search/search.html',
        url: '/search/:q',           
        controller: 'SearchCtrl'