AngularUI路由器:在调用子状态时将url参数传递给“抽象"状态 [英] AngularUI Router: pass url params to 'abstract' state while calling child state

问题描述

我想在调用子状态时访问抽象状态中的 url 参数($stateParam).我很想知道如何做到这一点.plunker 中的代码

I want to access the url parameter($stateParam) inside a abstract state while calling a child state. I am curious to know how that can be done. Code in plunker also

$stateProvider
    .state('contacts', {
        abstract: true,

        //my whole point is to get the id=1 here :(

        url: '/contacts/:id',
        templateUrl: function($stateParams){
            console.log("Did i get the child's parameter here? " + $stateParams.id)
            return 'contacts' + $stateParams.id + '.html'; //this will have a ui-view in it which will render its detail.
        }
    })

    .state('contacts.detail', {
        url: '/:id',
        // loaded into ui-view of parent's template
        templateUrl: 'contacts.detail.html',
        controller: function($scope, $stateParams){
          $scope.person = $scope.contacts[$stateParams.id];
        },
        onEnter: function(){
          console.log("enter contacts.detail");
        }
    })
})

`

我称之为

<a ui-sref="contacts.detail({id: 1})">我的第一个联系人<a>

我为什么要这样做?因为，我来自服务器的模板对于不同的联系人是不同的，所以布局是不同的.

Why am I doing this way? Because, my template from the server is different for different contacts, the layout is different.

推荐答案

嗯，在 GitHub 上发布问题 得到了合作者的答案.

Well, posting the issue on GitHub got me the answer from the collaborator.

所以，事情就是这样.参数必须命名不同".即使他们携带相同的信息.有点奇怪，但有效.

So, here is the thing. The params have to be "named different" even though they are carrying the same information. Kinda weird, but works.

在模板中:

<a ui-sref="contacts.detail({id: 1, duplicate_id: 1})">我的第一个联系人<a>

在javascript中

and in the javascript

`

$stateProvider
    .state('contacts', {
        abstract: true,

        //my whole point is to get the id=1 here :(

        url: '/contacts/:duplicate_id', //using duplicate_id here
        templateUrl: function($stateParams){} //...$stateParams will have :duplicate_id key
    }) 


    .state('contacts.detail', {
        url: '/:id', //using the real one here
        templateUrl: function($stateParams){} //....$stateParams will have :id key

    });

`更新:我发现这种情况下的 url 重复相同的属性两次，这对我来说现在还可以.欢迎提出任何建议.

` UPDATE: I found that the url in this case repeats the same attribute twice which is okay for me as of now. Any suggestions welcome.

希望这会有所帮助！

这篇关于AngularUI路由器:在调用子状态时将url参数传递给“抽象"状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！