UI路由器参数值在目标中未定义

Question

我想将参数值从一个页面传递到另一个页面而不显示URL中的值。因为我使用的是ui-router所以我遇到了“params”的东西，但不知怎的，我无法让它工作。请参阅以下代码示例： -

    <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;

}]);

所以我想将paramOne的值从Test2.html传递给Test3.html并在那里显示它。目前，参数paramOne将值显示为“未定义”

请告诉我如何在这种情况下使用参数，或者是否有更好的方法来解决这个问题。

Answer 1

另一答案