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.

Answer 1

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 :)

Answer 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

UI Router Params value is coming as undefined in destination

Question

2 answers

solution1
4 ACCPTED 2017-12-11 16:45:12

solution2
2 2017-12-18 08:25:01

UI Router Params value is coming as undefined in destination

Question

2 answers

solution1 4 ACCPTED 2017-12-11 16:45:12

solution2 2 2017-12-18 08:25:01

solution1
4 ACCPTED 2017-12-11 16:45:12

solution2
2 2017-12-18 08:25:01