Search code examples
javascriptangularjsangularjs-routing

Special Characters in routeparams executing controller twice in angularjs

How can I pass keyword (containing special characters) as a $routeParam to AngularJS App?

$routeProvider.when('/search/:keyword', {templateUrl:'someURL', controller:SearchCtrl})

This keyword can contain special characters.

So, I did encodeURIComponent to the "keyword" before redirecting to this page.

When this "keyword" has some special characters such as "$, @, &, comma" etc. then the controller is executing twice.

EX: If the keyword has '$' symbol, the Controller

  • Executes 1st with encoded form of that symbol (#/search/%24)
  • Executes 2nd with actual symbol (#/search/$)

This does not happen in the case of carat('^') symbol.

Am I missing out somewhere or Is my approach incorrect.

Solution

  • Using a workaround to deal with this kind of scenario:

    utils.encodeUriQuery = function (val) {
        return encodeURIComponent(val).
            replace(/%40/gi, '@').
            replace(/%3A/gi, ':').
            replace(/%24/g, '$').
            replace(/%2C/gi, ',').
            replace(/%26/gi, '&').
            replace(/%3D/gi, '=').
            replace(/%2B/gi, '+');
    }

    Calling the above function before I pass the search keyword to the URL

    $window.location.href = "/#/search/" + utils.encodeUriQuery(searchKeyword);

    NOTE: utils is a factory.