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

时间:2017-12-11 15:51:15

标签: javascript angularjs angular-ui-router angular-ui-router-extras

我想将参数值从一个页面传递到另一个页面而不显示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显示的值为“undefined”

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

2 个答案:

答案 0 :(得分:4)

检查answer 它提供了一个带有两种参数的工作示例。

  

确保您的使用情况匹配: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中拥有[ { "new_agent": { "id": "8ab86c18-3fae-4804-bfd9-c3d6e8f66260", "name": "BoJack Horseman", "primary_skillset": ["bills-questions"], "secondary_skillset": [] } }, { "new_job": { "id": "f26e890b-df8e-422e-a39c-7762aa0bac36", "tipo": "rewards-question", "urgent": false } }, { "job_request": { "agent_id": "ed0e23ef-6c2b-430c-9b90-cd4f1ff74c88" } } ] html的

希望这个回答你兄弟:)

答案 1 :(得分:2)

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

public class FragmentThree extends Fragment {

//... Click method of the button calls
getActivity().startService(new Intent(getActivity(),gps_service.class));

Note the added myApp.controller("ctrlRequestDetail", ['$rootScope', '$scope', '$stateParams', ($rootScope, $scope, $stateParams) => { $rootScope.$on('$stateChangeSuccess', (event, toState, toParams, fromState, fromParams) => { console.log(toParams, fromParams) }); }]); dependency