Angular - $ stateParams在控制器中为空

I am having a lot of trouble understanding how stateParams are supposed to work. Everywhere I look suggests that this should pass an item_id of 456 when I travel to the URL /#/manage/456, but instead $stateParams is an empty object. Furthermore, in the $state object that is passed to MainCtrl, I can access all of the parameters by using $state.params, however this seems to be undesirable and hackish.

我很难理解stateParams应该如何工作。我看到的每个地方都建议当我前往URL /#/ manage / 456时,这应该传递一个456的item_id,而是$ stateParams是一个空对象。此外,在传递给MainCtrl的$ state对象中,我可以通过使用$ state.params访问所有参数,但这似乎是不受欢迎的和hackish。

angular
    .module('router',['ui.router'])
    .config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider)
    {

        $stateProvider
            .state('manage', 
            {
                url: '/manage',
                templateUrl: '/templates/main.html',
                controller: 'MainCtrl'
            })
            .state('manage.item_id',
            {
                url: '/:item_id',
                templateUrl: '/templates/main.html',
                controller: 'MainCtrl'
            })

    }])
    .controller('MainCtrl', ['$scope', '$stateParams', '$state', function($scope, $stateParams, $state)
    {
        // empty object
        console.log('$stateParams: ', $stateParams);

        // shows the variables i want
        console.log('$state.params: ', $state.params); 
    }])

1 个解决方案

#1

What you're trying to do should work fine, see this JSFiddle: http://jsfiddle.net/ahchurch/gf7Fa/14/

你正在尝试做的应该工作正常,请看这个JSFiddle:http://jsfiddle.net/ahchurch/gf7Fa/14/

<script type="text/ng-template" id="item.tpl.html">
    embeded item template
</script>

<script type="text/ng-template" id="main.tpl.html">
    <ul>
        <li><a href="#/manage/45">change route</a></li>
    </ul>
    <div ui-view></div>
</script>

<div ui-view></div>


angular.module('myApp',['ui.router'])
    .config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider)
    {
        $urlRouterProvider.otherwise("/manage");
        $stateProvider
            .state('manage', 
            {
                url: '/manage',
                templateUrl: 'main.tpl.html',
                controller: 'MainCtrl'
            })
            .state('manage.item_id',
            {
                url: '/:item_id',
                templateUrl:'item.tpl.html',
                controller: 'MainCtrl'
            })
    }])
.controller('mainController', function(){})
    .controller('MainCtrl', ['$scope', '$stateParams', '$state', function($scope, $stateParams, $state)
    {
        // empty object
        console.log("main controller"); 

        console.log($stateParams);
    }]);

One thing I noticed is that your template is the same file for both states, so you may just be seeing the initialization of the "manage" state, and never seeing the "manage.item_id" state.

我注意到的一件事是你的模板对于两种状态都是相同的文件,所以你可能只是看到“管理”状态的初始化,而从未看到“manage.item_id”状态。

#1