Angular state : pass multiple parameter without changing url querystring to controller

Question

I want to send a parameter from app.run to my loginController. Because, I call a state.go() from the $rootScope.$on() defined inside the app.run.

app.run('$rootScope', '$state', '$stateParams',function($rootScope, $state, $stateParams(){
    $rootScope.$state = $state;
    $rootScope.$stateParams = $stateParams;
    $rootScope.$on('unauthorized_access', function (event, args) {
        $state.go("page.login", {'error': args.error,'msg': args.msg});
    });
}]);

I have

app.config(['$stateProvider','$urlRouterProvider',function($stateProvider, $urlRouterProvider, $httpProvider){
    $urlRouterProvider.otherwise('/');
    $stateProvider
    // some parts omitted...
    .state('page.login', {
        url: '/login',
        views: {
            'page': {
               templateUrl: 'app/landingPage/login.html',
                controller:  'loginController',
                params: {obj : {error : null, message: null} }
           }
        }
    });
}]);

and I want to pass parameters to the loginController from app.run, through $state.go() during transition.

    $state.go("page.login", {'error': err,'message': msg});

and in my controller, this is how I am trying to receive the params...

app.controller('loginController',['$scope', '$state', '$stateParams',   function($scope, $state, $stateParams){
    console.log($stateParams.obj);
}]);

I do not want to change the url to >> url: '/login/:params' etc. in stateProvider

I referenced this page : stackoverflow example

but,was not helpful. Any help is appreciated. Apologies for my poor communication.

I tried, it gives : Object {} , when I log $stateProvider into console. — Jayaraj PS, Jun 28 '16 at 11:45
Ok, tried. But, when I console it [console.log($stateParams.obj)], I get 'undefined' — Jayaraj PS, Jun 28 '16 at 11:49
as he said he does not want to change the URL. $stateParams record the params of the state bind with the URL. Try to $log$(state.current) in your controller and check if you don't have a params fields that hold your err and message fields. — Walfrat, Jun 28 '16 at 11:53
@Walfrat, the obj is always null. It is always giving whatever, I have given in the stateProvider. It doesnot show the data from $state.go(). — Jayaraj PS, Jun 28 '16 at 12:12
I just noticed that you defined params in the view, params are defined on state level. So move `params: {obj : {error : null, message: null} ` on the same level than `view` and `url` — Walfrat, Jun 28 '16 at 12:15
I tried after moving the param. It only changes the position where it appears in the $state. Earlier it was inside url:'/login', page:{controller:"loginController", params:{obj:null} }. However, it is now moved to url:'/login', params:{obj:null} page:{controller:"loginController" }. — Jayaraj PS, Jun 28 '16 at 12:22

Jayaraj PS · Answer 1 · 2016-06-28T14:03:43.770

After a long research, I ended up with weird solution. I still doubt, whether this is even a solution. However, it does work for me.... I made a hack of ui.router LOL ....

I am using Angular ui-router version v0.2.18. and there at line no. 3160, they have put a line of code like :

// Store the hash param for later (since it will be stripped out by various methods)
var hash = toParams['#'];

and in line no. 3223 they have

 if (shouldSkipReload(to, toParams, from, fromParams, locals, options)) {
    if (hash) toParams['#'] = hash;

So, I thought of passing my object with a '#' key like this

.state('page.login', {
    url: '/login',
    views: {
        'body@page': {
            templateUrl: 'app/landingPage/login.html',
            controller:  'loginController',
            params: {'#' : null},
        }
    },
    authenticate: false
});

and like this

$rootScope.$on('unauthorized_access', function (event, args) {
    $state.go("page.login", {'#' : {'error': args.error,'msg': args.msg}});
});

and surprise, it worked..... I got the object logged in console : console.log($stateParams['#']);

I know the solution is cunning[udayip as in malayalam]... but then it worked for me... I will not mark this as an answer. So, I request some angular experts to provide a real solution. If some experts say, this can be a solution, I will mark this as the answer.

Angular state : pass multiple parameter without changing url querystring to controller

1 Answers1