Значение параметра UI Router Params становится неопределенным в пункте назначения

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

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;

}]);

Поэтому я хочу передать значение paramOne из Test2.html в Test3.html и отобразить его там. В настоящее время параметр paramOne показывает значение как "неопределенное"

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

Источник

2 ответа

Решение

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

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

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

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

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

Источник

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

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

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

}]);

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

Источник
Другие вопросы по тегам