AngularUI路由器：通过网址参数，以“抽象”状态，而调用子状态 [英] AngularUI Router: pass url params to 'abstract' state while calling child state

问题描述

我要访问的URL参数（$ stateParam）一个抽象状态里，而调用子状态。我很想知道如何可以做。在 plunker code也

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

`

和我叫它为

＆LT;一个UI的SREF =contacts.detail（{ID：1}）＆gt;我第一次接触＆LT; A＆GT;

我为什么这样？因为，从服务器我的模板是对于不同的接触不同，布局是不同的。

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.

所以，这里的东西。该PARAMS必须命名的不同，尽管他们都携带相同的信息。有点不可思议，但工作。

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

在模板：

＆LT;一个UI的SREF =contacts.detail（{ID：1，duplicate_id：1}）＆gt;我第一次接触＆LT; A＆GT;

和在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路由器：通过网址参数，以“抽象”状态，而调用子状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！