AngularJS ui.router and ng-repeat?

Question

Angular

Hey!
There was a problem in order to make friends ng-repeat and ui-view.
I have the following routing settings:

(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'
            }
          }
        });
  }
})();

There is such a view with a list of tasks:

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

and such a view with a list element (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>

what to smoke to make it work for me?
If you just insert the code from the item inside the block with ng-repeat, then everything works. But not with ui-view. Maybe I'm not doing it right. Tell me how it is necessary and how it will be more competent to make such a bunch.

Answer 1

You don't quite understand how ui-router works.
Your list item view must be a directive (well, or a component in 1.5, which is essentially the same thing), then it will work as you want.
In fact, ui-router allows you to divide your page into N components, for each of which you can specify your own template, and specify the rules by which they will be replaced.
In your example, there are two such components: a form and a list of tasks.
The list item must be a child component of your list view.