State transition happens twice, second time is in registerState

[nxapropose]

I've tried but couldn't re-create the problem in Plunker. But I've done some step-debugging, and got some information. Hopefully people who are familiar with UI-router's codebase can give me an answer.

I'm building a simple search app. The search result page is defined as:

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

And in SearchCtrl, I have two scope functions to add/remove search terms:

$scope.searchByTerm = function(term) {
    termsService.addTerm($scope.selectedTerms, term);
    $state.go($state.current, {q: $scope.selectedTerms}, {reload: true});
};

 $scope.removeTerm = function(term) {
    termsService.removeTerm($scope.selectedTerms, term);
    $state.go($state.current, {q: $scope.selectedTerms}, {reload: true});
 };

The termsService.addTerm function simply pushes term into $scope.selectedTerms array, and termsService.removeTerm removes term from the array if it exists. Since I want the page to reload and fetch data according to new search terms, I have set reload to be true.

With this, the SearchCtrl gets initiated twice (the state transition happens twice), when $scope.selectedTerms has 2 or more items. I've tried all possible ways of rewriting this, and it still consistently runs twice.

I've stepped into source code of both angular-ui-router.js and angular.js, and found this listener has triggered the transitionTo for the second time:

$urlRouterProvider.when(state.url, ['$match', '$stateParams', function ($match, $stateParams) {
        if ($state.$current.navigable != state || !equalForKeys($match, $stateParams)) {
          $state.transitionTo(state, $match, { location: false });
        }
}]);

This is in the registerState function. From the console, $match and $stateParams are equal. I'm not sure why this step is executed in this case.

(angular-ui-router#0.2.11, angular#1.2.26)

[christopherthielen]

Is $scope.selectedTerms by chance an array of ints?

[nxapropose]

@christopherthielen it's an array of strings.

[christopherthielen]

@nxapropose I was thinking you were seeing the int->string coersion problem, but if selectedTerms are indeed strings, then that's not it.

I'll really need to see this reproduced in a plunk, or else add more information.

Also, please build from master and try using the ui-router from build/angular-ui-router.js

[nxapropose]

@christopherthielen Actually, I just build from master and it's solved! Thanks :)
Originally I was using 0.2.11 installed from Bower, and it has this problem. Do you know why is that?

[christopherthielen]

yes, because 0.2.11 doesn't coerce params to strings by default. Are you sure your params are already strings?

[nxapropose]

I see. Will it be in a release soon?
Yes I'm sure they are. Here's where they are from (can this cause any problem?)

var q = $stateParams.q;

if(q === undefined) {
        $scope.selectedTerms = [];
}
else if(typeof(q) === 'string') {
       if(q === '') {
            $scope.selectedTerms = [];
       }
       // if single item, convert it to array
       else {
            $scope.selectedTerms = [q];
       }
}
// if it's already an array
else {
        $scope.selectedTerms = q;
}

I've been console logging $scope.selectedTerms and can see it contains strings.

[christopherthielen]

Thanks, that helps. I just now realized you're using query string params with array of values. That is basically broken in 0.2.11 and should be fixed in 0.2.12. I need to fix a couple more things before 0.2.12 is released. I was hoping to release last week, but some other additional issues crept in. I'd say 0.2.12 is 1-2 weeks off. In the meantime, feel free to use/test your build from master.

[nxapropose]

Great! Looking forward to the new release.
Thanks a lot for the help :) :)

[christopherthielen]

closed via 5e6783b