State params not passed with ui-router

Question

My code is like this:

$stateProvider
        .state('results', {
        url: '/results?a&b&c',
        controller($stateParams, $state) {
            'ngInject';

            console.log($stateParams);
            console.log($state.params);
        },
        template: '<div>Hello world</div>'
    });

.. and when I pass in localhost:8888/results?a=10&b=20c=30, the query string is stripped from the url. And $state.go('results', {a:10, b:20, c:30} does not work either. Changing the params from query string params to url parameters did not work either. There is some stupid bug in here somewhere that I haven't been able to squash!

I have tried changing from express to connect for the server, but no change. So have anyone experienced this, and how did you fix it?

My current connect settings are as follows:

const connect = require('gulp-connect');
const history = require('connect-history-api-fallback');

gulp.task( 'serve', function () {
    connect.server( {
        root: conf.dest,
        port: conf.port,
        middleware: function( connect, options ) {
            return [ history() ];
        }
    } );
} );

Edit:

When I console.log the parameters before $state.go, the info is correct, when I console.log $stateParams from the controller of results, I get { a: undefined, b: undefined, c: undefined }.

Edit2:

I tried this as well to no avail.

$stateProvider
    .state('results', {
        url: '/results/:a/:b/:c',
        controller($stateParams, $state) {
            'ngInject';

            console.log($stateParams);
            console.log($state.params);
        },
        template: '<div>Hello world</div>'
    })

And in the from-state controller:

class OptionsController {
    constructor($state) {
        this.$state = $state;
    }

    // ...

    submit() {
        console.log(this.options()); // prints the correct info
        this.$state.go('results', this.options());
    }
}

Update3:

I created another state test. That state looks like this:

$stateProvider
    .state('test', {
        url: '/x/:y',
        controller($stateParams) {
            'ngInject';

            console.log(JSON.stringify($stateParams));
        }
    })

When I enter http://localhost:8888/x/10, I am immediately redirected to http://localhost:8888/x/. This is beyond weird!

My other route config is `$locationProvider.html5Mode(true);` and `$urlRouterProvider.otherwise('/');` — user3654410, Aug 02 '16 at 16:18

score 0 · Answer 1 · answered Aug 02 '16 at 16:18

$stateProvider
        .state('results', {
        url: '/results?:a&:b&:c',
        controller($stateParams, $state) {
            'ngInject';

            console.log($stateParams);
            console.log($state.params);
        },
        template: '<div>Hello world</div>',
        params : {
         a : null,
         b : null,
         c : null
        }

    });

more something like this.

score 0 · Answer 2 · answered Aug 02 '16 at 18:19

Okay. Found the solution. It was due to a directive intercepting ui router like this $scope.$on('$stateChangeStart', performAnimation); for the sake of an animation.

Later in the code I used $state.go(toState.name) and forgot to add back the parameters.

Stupid bug, like all stupid bugs are! So point being: Check if you intercept '$stateChangeStart' anywhere! :)

State params not passed with ui-router

2 Answers2