UI Router: как передать параметры вложенным представлениям

Question

Я всегда использовал ngRoute для своих задач маршрутизации, пока мне не понадобятся вложенные представления.

Я использую ui-router в первый раз, и это здорово, за исключением одной вещи: мне нужно передать параметр в вложенные представления.

Идея - это список виджетов, каждый из которых имеет идентификатор. Я хочу, чтобы этот идентификатор был доступен для контроллера вложенных представлений.

Вот вымышленный идея о том, что у меня есть:

home.html

<li data-ng-repeat="widget in vm.widgets"> 
    <div ui-view="{{widget.template}}"></div> 
</li> 

app.config (часть ...)

.state('home', { 
     url: '/home', 
     views: { 
      '': { 
       controller: 'HomeController', 
       controllerAs: 'vm', 
       templateUrl: 'Scripts/app/home/home.html' 
      }, 
      'blebleh@home': { 
       controller: 'BleblehController', 
       controllerAs: 'vm', 
       templateUrl: 'Scripts/app/views/blebleh.html' 
      }, 
      'blablah@home': { 
       controller: 'BlablahController', 
       controllerAs: 'vm', 
       templateUrl: 'Scripts/app/views/blablah.html' 
      } 
     } 
    }) 

Так, скажем, у меня есть для vm.widgets:

[ 
    { 
     widgetId: 1, 
     template: 'blablah' 
    }, 
    { 
     widgetId: 2, 
     template: 'blebleh' 
    } 
] 

Как я могу передать 1 (widgetId) в BlablahController и 2 (widgetId) в BleblehController?

Я пробовал несколько вещей с помощью $ stateParams, но без успеха. Не удалось найти решение или ответить в любом месте.

Благодаря

Answer 1

Когда вы ваши маршруты настроить так:

app.config(function($stateProvider) { 
    $stateProvider 
    .state('home', { 
     url: '/home', 
     views: { 
     '': { 
      controller: 'HomeController', 
      controllerAs: 'vm', 
      templateUrl: 'home.html' 
     }, 
     'blebleh@home': { 
      controller: 'BleblehController', 
      controllerAs: 'vm', 
      templateUrl: 'blebleh.html' 
     }, 
     'blablah@home': { 
      controller: 'BlablahController', 
      controllerAs: 'vm', 
      templateUrl: 'blablah.html' 
     } 
     } 
    }) 
}); 

и ваш home.html как это:

<div data-ng-repeat="widget in vm.widgets"> 
    <div ui-view="{{ widget.template }}"></div> 
</div> 

вы должны быть в состоянии получить доступ к ng-repeat сек widget объект , и это свойства изнутри дочерних представлений через наследование сферы. Так внутри blebleh.html и blablah.html вы можете получить доступ к соответствующему widgetId S просто с помощью:

{{ widget.widgetId }} 

Это работает, потому что объем, созданный каждым ui-view наследует сферу, созданную каждую петлю ng-repeat (что создает отдельную область для каждого widget).

UPDATE

Хотя выше до сих пор стоит, оглядываясь на свой вопрос я не думаю, что я ответил на него непосредственно.

Как пройти widgetId к BlablahController/BleblehController?

Ответ сделать выше (воспользоваться наследованием области видимости) и смести его с $scope службы и использовать его в своих соответствующих контроллеров, например:

app.controller('BleblehController', function($scope) { 
    var vm = this; 
    vm.myWidgetId = $scope.widget.widgetId; 
}); 

app.controller('BlablahController', function($scope) { 
    var vm = this; 
    vm.myWidgetId = $scope.widget.widgetId; 
}); 

Example Plunk