Значение параметров маршрутизатора пользовательского интерфейса становится неопределенным в пункте назначения

Я хочу передать значения параметров с одной страницы на другую, не показывая значения в URL-адресе. Поскольку я использую ui-router, я сталкиваюсь с «параметрами», но почему-то не могу заставить его работать. См. пример кода, как показано ниже: -

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" }
                }
            }
        })
});

Логин.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 показывает значение как "undefined".

Пожалуйста, дайте мне знать, как использовать параметры в этом сценарии или есть ли лучший подход для решения этой проблемы.


javascript angularjs angular-ui-router angular-ui-router-extras
person simple user    schedule 11.12.2017    source источник

Ответы (2)


arrow_upward
4
arrow_downward

проверьте этот ответ, в котором приведен рабочий пример с двумя типами параметров.

убедитесь, что ваше использование соответствует: ui-sref='stateName({param: value, param: value})'

хорошо.. я подготовил для вас Plunker :)

  • основная проблема в вашем коде - это место, где вы определяете свойство Params, оно должно быть на корневом уровне (тот же уровень свойства url)
  • изменить template: 'Test3.html', на templateUrl: 'Test3.html',
  • так как состояние home.requestsummary.hello в дочернем элементе home.requestsummary, как вы определяете, я думаю, вам нужно изменить 'homedetailview@home' на '[email protected]' и иметь <div ui-view="test2detailview"></div> в Test2.html

надеюсь, что этот ответ тебе, братан :)

person Bassem Mamar    schedule 11.12.2017
comment
По-прежнему получает stateParams как неопределенное даже после изменения stateName на home.requestsyyummary.requestdetail({paramOne:request.Id}) из .requestdetail({paramOne:request.Id}). Нужно ли мне что-то менять в моем коде, кроме этого? - person simple user; 18.12.2017
comment
Поскольку вы предложили перенести свойство Params на корневой уровень, это только решило мою проблему. Спасибо за вашу помощь. - person simple user; 19.12.2017

arrow_upward
2
arrow_downward

Может быть, параметр еще не разрешен? Что, если вы попробуете:

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

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

}]);

Обратите внимание на добавленную зависимость $rootScope

person Jeffrey Roosendaal    schedule 18.12.2017
comment
Предыдущий ответ помог решить. Спасибо за вашу помощь. - person simple user; 19.12.2017