AngularJS ui.router и ng-repeat?

Question

[frontender]

Привет!
Возникла пробелема с тем, чтобы подружить ng-repeat и ui-view.
У меня есть такие настройки роутинга:

(function () {

  angular
      .module('app', ['ui.router'])
      .config(configure);

  function configure($stateProvider, $urlRouterProvider) {

    $urlRouterProvider.otherwise('/');

    $stateProvider
        .state('home', {
          url: '/',
          views: {
            'formView': {
              templateUrl: './app/form/form.html',
              controller: 'FormController as form'
            },
            'listView': {
              templateUrl: './app/list/list.html',
              controller: 'ListController as list'
            },
            'listItemView': {
              templateUrl: './app/item/item.html',
              controller: 'ItemController as item'
            }
          }
        });
  }
})();

Есть такая вьюха со списком задач:

<h2>Список задач</h2>
<div class="list border">
  <div ng-repeat="item in list.items">
    <div ui-view="listItemView"></div>
  </div>
</div>

и такая вьюха с элементом списка(item):

<div class="item" >
  <span class="time">{{ item.endTime }}</span>
  <span class="title">{{ item.title }}</span>
      <span class="show-comment-btn">
        <span class="comment">{{ item.comment }}</span>
      </span>
  <a href="#add-minutes" title="Добавить 10 мин ко времени" ng-click="item.addTenMinutes()">+10 мин</a>
  <a href="#del" title="Удалить задание" ng-click="item.removeTask()">x</a>
</div>

что курить, чтобы у меня заработало?

Если просто вставлять код из item, внутрь блока с ng-repeat, то все работает. А вот с ui-view нет. Может я конечно все не так делаю. Скажите как надо и как грамотнее будет сделать такую вот связку.

Answer 1

[Николай]

Вы не совсем понимаете, как работает ui-router.
Ваша вьюха с элементом списка должна быть директивой(ну или компонентой в 1.5, что по сути одно и то же), тогда будет работать, как вы хотите.
По факту ui-router позволяет разделить вашу страницу на N компонент, для каждой из которых вы можете указать свой template, и указать правила, по которым они будут заменяться.
В вашем примере - есть два таких компонента: формочка и список задач.
Элемент списка должен быть дочерней компонентой для вашей вьюхи со списком.

Comments

[frontender]

спасибо, я понял.