使用帶ui-router的ui-sref指令將變量傳遞給抽象父狀態

Question

我正在設置一個簡單的angularjs應用程序來管理組，其中我使用ui-router進行嵌套路由。

var groupsApp = angular.module('groupsApp', [
    'ui.router',
]);

每個小組都有參與者和一個計划。 頁面/#/groups使用ui-sref指令顯示包含每個組鏈接的列表：

<ul>
    <li ng-repeat="group in groups">
        <a ui-sref="group.participants({group_id: {{group.id}}})">{{group.name}}</a>
    </li>
</ul>

狀態導航配置如下：

groupsApp.config(
    function($stateProvider) {

        $stateProvider
            .state('groups', {
                url: '/groups',
                templateUrl: 'partials/groups.html'
            })
            .state('group', {
                abstract: true,
                url: '/:group_id',
                templateUrl: 'partials/group.html',
            })
            .state('group.participants', {
                url: '/participants',
                templateUrl: 'partials/participants.html',
            })
            .state('group.programm', {
                url: '/programm',
                templateUrl: 'partials/program.html'
            })
    });

我使用以下控制器：

var myAppControllers = angular.module('myAppControllers', []);

myAppControllers.controller('GroupController', ['$scope', 
  function ($scope) {

    $scope.groups = [
      {'id': 'group1',
       'name': 'My first group',
      {'id': 'group2',
       'name': 'My secord group',
    ];

  }]);

group狀態是抽象的， group_id確定URL。 對於id為group1和group2的組，可能的url是：

/#/group1/participants
/#/group1/program

/#/group2/participants
/#/group2/program

使用ui-sref指令，我想導航到組的參與者頁面：

<a ui-sref="group.participants({group_id: {{group.id}}})">{{group.name}}</a>

因此，我導航到group.participants狀態並傳遞group_id參數以指示哪個組。 但是，這是父狀態group的參數。 單擊該鏈接會生成以下URL：

/#//participants

顯然，父類group沒有獲得此參數。 有誰知道如何實現這一目標？

ps我現在意識到問題可能是角度表達式的嵌套：

{group_id: {{group.id}}}

這是允許的嗎？

Answer 1

我創造了一個正在運作並且應該遵循您的需求的plunker： 在這里

其中一個變化：

<ul>
   <li ng-repeat="group in groups">
      <!--
      <a ui-sref="group.participants({group_id: {{group.id}}})">{{group.name}}</a>
      -->
      <a ui-sref="group.participants({group_id: group.id})">{{group.name}}</a> 
   </li>
</ul>

還有state定義的片段（事實上​​與問題中的相同，但正在運行）

團體定義：

$stateProvider
    .state('groups', {
      url: '/groups',
      template: '<ul> ' +
      '    <li ng-repeat="group in groups"> ' + 
      '     <a ui-sref="group.participants({group_id: group.id})">' +
      '        {{group.name}}</a> ' +
      '   </li> ' +
      ' </ul>',
      controller:['$scope','$state',
        function ( $scope , $state){ 

          $scope.groups = [{name : "My first group" , id : "group1"}
                         , {name : "My second group", id : "group2"}];

      }],
    })

這是group abstract狀態。 它可以訪問$stateParams並將它們存儲在范圍內。 所有兒童州也可以訪問它。

.state('group', {
    abstract: true,
     url: '/:group_id',
     template: '<div>' +
     '   <h4> group: {{group_id}} <a ui-sref="groups">back</a></h4>' +
     '   <div ui-view></div>' +
     ' </div>',
     controller:['$scope','$state','$stateParams',
       function ( $scope , $state , $stateParams){ 
         $scope.group_id = $stateParams.group_id;
         $scope.params = $stateParams;
         $scope.state = $state.current;
         $scope.showJson = function(x) { return JSON.stringify(x, undefined, 2); };
     }],
 })

abastract group的孩子狀態可以消耗已經為他們准備的東西

 .state('group.participants', {
     url: '/participants',
     template: '<div>' +
     ' <h5>params</h5> ' +
     '   <pre>x{{showJson(params)}}</pre>' +
     ' <h5>state</h5> ' +
     '   <pre>{{showJson(state)}}</pre>' +
     ' </div>',
 })
 .state('group.programm', {
     url: '/programm',
     template: '<div>programm</div>'
 })
 ;

Answer 2

我的html文件中的嵌套表達式是導致問題的原因。 根據Radim的建議，改變：

<a ui-sref="group.participants({group_id: {{group.id}}})">{{group.name}}</a>

至，

<a ui-sref="group.participants({group_id: group.id})">{{group.name}}</a>

解決了這個問題。

非常感謝Radim的幫助！