UI Router Params value is coming as undefined in destination

Question

I want to pass the parameter values from one page to another without showing the values in URL. Since I am using ui-router so I come across "params" thing but somehow I could not make it work. Please see the code sample as below:-

index.html

    <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.3/angular-ui-router.min.js"></script>
        <script src="../../Scripts/AngularControllers/LoginHomeControllers/RouteMainController.js"></script>
        <script src="../../Scripts/AngularControllers/LoginHomeControllers/LoginController.js"></script>
 <script src="../Scripts/AngularControllers/Test2Controller.js"></script>
    <script src="../Scripts/AngularControllers/Test3Controller.js"></script>
    </head>
    <body>
        <div ui-view="mainview"></div>
    </body>
    </html>

RouteMainController.js

var app = angular.module("appHome", ['ui.router']);

app.config(function ($stateProvider, $urlRouterProvider) {
    $urlRouterProvider.otherwise('/login');
    $stateProvider
        .state('introduction', {
            url: '/',
            views: {
                'mainview':
                {
                    templateUrl: 'Login.html',
                    controller: 'ctrlLogin'
                }
            }
        })
        .state('login', {
            url: '/login',
            views: {
                'mainview':
                {
                    templateUrl: 'Login.html',
                    controller: 'ctrlLogin'
                }
            }
        })
        .state('home', {
            url: '/home',
            views: {
                'mainview':
                {
                    templateUrl: 'Home.html',
                }
            }
        })
        .state('home.requestsummary', {
            url: '/requestsummary',
            views: {
                'homedetailview':
                {                    
                    templateUrl: 'Test2.html',    
                    controller: 'ctrlReqSumm'
                }
            }
        })
        .state('home.requestsummary.hello', {
            url: '/requestdetail',           
            views: {
                'homedetailview@home':
                {                    
                    template: 'Test3.html',
                    controller: 'ctrlRequestDetail',
                    params: { paramOne: "defaultValueOne" }
                }
            }
        })
});

Login.html

<div>
    <button id="btnAdd" type="submit"  ng-click="Login()">Login</button>
</div>

LoginController.js

var myApp = angular.module('appHome');
myApp.controller("ctrlLogin", ['$scope', '$location', function ($scope, $location) {
    $scope.Login = function () {
        window.location.href = '#!home/requestsummary';       
    }
}]);

Home.html

<!--Sample Code for displaying Menu Tab and corresponding link-->
<li>
    <a href="#">Employees <span class="caret"></span></a>
    <ul class="dropdown-menu sub-menu">
        <li><a ui-sref=".employeeadd">Add Employee Record</a></li>       
    </ul>
</li>

<div ui-view="homedetailview"></div>

Test2.html

<div>
    <div ng-repeat="request in requestData">
        {{request.name}}
        <a ui-sref=".requestdetail({paramOne:request.Id})">             
        </a>

    </div>
</div>

Test2Controller.js

var myApp = angular.module('appHome');
myApp.controller("ctrlReqSumm", ['$scope', function ($scope) {
    $scope.requestData = [{
        'Id': "1", 'name': "Hello",
        'Id': "2", 'name': "Hi",
        'Id': "3", 'name': "OK"
    }]
}])

Test3.html

<div>
    <label>The id is: </label> {{requestId}}
</div>

Test3Controller.js

var myApp = angular.module('appHome');
myApp.controller("ctrlRequestDetail", ['$scope', '$stateParams', function ($scope,  $stateParams) {

    $scope.requestId = $stateParams.paramOne;

}]);

So I want to pass the value of paramOne from Test2.html to Test3.html and display it there. Currently the parameter paramOne is showing value as "undefined"

Please let me know how to use params in this scenario or if there is better approach to solve this problem.

Bassem Mamar · Accepted Answer · 2017-12-18T08:18:35.453

4

check this answer which provides a working example with two type of parameters.

make sure that your Usage match: ui-sref='stateName({param: value, param: value})'

ok.. i prepared Plunker for you :)

the main issue in your code is the place you define Params property, it should be in the root level (same url property's level)
change template: 'Test3.html', to be templateUrl: 'Test3.html',
since home.requestsummary.hello state in a child of home.requestsummary as you define, i think you need to chenage 'homedetailview@home' into 'test2detailview@home.requestsummary', and have <div ui-view="test2detailview"></div> in Test2.html

hope this answer you bro :)

edited Dec 18 '17 at 08:18

answered Dec 11 '17 at 16:45

Bassem Mamar

328
2
14

Still getting stateParams as undefined even after changing the stateName to home.requestsyyummary.requestdetail({paramOne:request.Id}) from .requestdetail({paramOne:request.Id}). Do I need to change anything else than this in my code? – simple user Dec 18 '17 at 03:34
As you suggested moving Params property to root level only resolved my problem.Thanks for your help. – simple user Dec 19 '17 at 02:21

Jeffrey Roosendaal · Answer 2 · 2017-12-18T15:51:57.007

2

Maybe the param is not resolved yet? What if you try:

myApp.controller("ctrlRequestDetail", ['$rootScope', '$scope', '$stateParams', ($rootScope, $scope,  $stateParams) => {

    $rootScope.$on('$stateChangeSuccess', (event, toState, toParams, fromState, fromParams) => {
        console.log(toParams, fromParams)
    });

}]);

Note the added $rootScope dependency

edited Dec 18 '17 at 15:51

answered Dec 18 '17 at 08:25

Jeffrey Roosendaal

6,872
8
37
55

The previous answer helped to resolve. Thanks for your help. – simple user Dec 19 '17 at 02:23

UI Router Params value is coming as undefined in destination

2 Answers2