Question

我想在调用子状态时访问抽象状态中的url参数（$ stateParam）。我很想知道如何做到这一点。 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})">My first contact<a>

为什么我这样做？因为我的服务器模板对于不同的联系人是不同的，所以布局是不同的。

Answer 1

好吧，posting the issue on GitHub给了我合作者的答案。

所以，这就是事情。参数必须“命名为不同”，即使它们携带相同的信息。有点奇怪，但有效。

在模板中：

<a ui-sref="contacts.detail({id: 1, duplicate_id: 1})">My first contact<a>

并在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重复相同的属性两次，这对我来说是好事。欢迎任何建议。

希望这有帮助！

Answer 2

这对我有用：

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

    url: '/contacts/:id/',
    templateUrl: function($stateParams){} 
}) 


.state('contacts.detail', {
    url: 'details', 
    templateUrl: function($stateParams){}

});

所以现在如果你想转到contact.details并传递也将在父抽象状态下可用的id：

<a ui-sref="contacts.detail({id: 1})">My first contact<a>

，浏览器中的网址应如下：/contacts/1/details

Angular UI Router：在调用子状态时将url params传递给'abstract'状态

2 个答案: