@frontender

AngularJS ui.router и ng-repeat?

Привет!
Возникла пробелема с тем, чтобы подружить 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 нет. Может я конечно все не так делаю. Скажите как надо и как грамотнее будет сделать такую вот связку.
  • Вопрос задан
  • 193 просмотра
Решения вопроса 1
Вы не совсем понимаете, как работает ui-router.
Ваша вьюха с элементом списка должна быть директивой(ну или компонентой в 1.5, что по сути одно и то же), тогда будет работать, как вы хотите.
По факту ui-router позволяет разделить вашу страницу на N компонент, для каждой из которых вы можете указать свой template, и указать правила, по которым они будут заменяться.
В вашем примере - есть два таких компонента: формочка и список задач.
Элемент списка должен быть дочерней компонентой для вашей вьюхи со списком.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы