ui-router: промежуточные шаблоны

Окончательное редактирование: рабочий планкер с включенной директивой.

Изменить: я сделал первый планкер с данным решением в первом ответе. Это работает, но это нежелательное поведение, потому что шаблон содержит все партиалы.

Я сделал второй планкер с тем, чего я надеюсь достичь (но это не работает , очевидно). Я думаю, это в основном потому, что шаблон не является родителем партиала, а содержится в нем, поэтому ui-router не очень хорошо понимает, что я хочу.

Любая помощь в этом будет принята с благодарностью!

Мы создаем веб-сайт с использованием Angular Material и UI-маршрутизатора, и все наши страницы с контентом используют один и тот же «контейнер», потому что мы всегда хотим одинакового отзывчивого поведения.

Код этого универсального контейнера будет примерно таким:

  <div class="layout-content">
    <div layout="column" layout-align="center">
      <div layout="row" layout-align="center center">
        <section class="layout-fixed-width md-whiteframe-z1" flex-sm="100" flex-gt-sm="90">

        {{content placed here}}

        </section>
      </div>
    </div>
  </div>

Заголовок может отличаться на всех страницах, поэтому структура, которая у нас будет, в основном будет такой:

введите здесь описание изображения

Вопрос в том, как этого добиться в ui-router? Мы сделали несколько вложенных представлений, но я не вижу, как сделать общий шаблон, чтобы код мог выглядеть примерно так:

<form>
  <md-toolbar/>
  <div ui-view="generic-template">
      <div ui-view="my-content"></div>
  </div>
</form>

В идеале мы хотели бы определить представление универсального шаблона только один раз и использовать его во всех наших модулях.

В документация по вложенным состояниям и вложенным представлениям Я вижу в основном вложенные состояния, но на самом деле нам нужен простой HTML-шаблон, поэтому, возможно, мы слишком усложняем его, и возможен более простой способ (я совершенно уверен, что это так). Я также проверил эту проблему, где один из ответов говорит, что ui -маршрутизатор должен быть решением, но не более того.

Может быть, мы должны вместо этого сделать директиву?


angularjs angular-material templates angular-ui-router nested-views
person LeoLozes    schedule 11.09.2015    source источник

Ответы (2)


arrow_upward
2
arrow_downward

Может быть, мы должны вместо этого сделать директиву?

Директива с включенным ui-view, безусловно, дает вам то, что вы ищете. Это убережет вас от загромождения логики маршрутизации чем-то, что не имеет ничего общего с маршрутизацией.

genericTemplate.html:

<div>
    <p>Generic content</p>
    <ng-transclude></ng-transclude>
</div>

Где-то в вашем js:

angular.module('formApp')
    .directive('genericTemplate', function () {
        return {
            replace: true,
            transclude: true,
            templateUrl: 'genericTemplate.html'
        };
    });

В вашем html:

<body ng-app='formApp'>
    <div generic-template>
        <div ui-view></div>
    </div>
</body>

Изменить: работающий плункер

person Henrik    schedule 08.02.2016
comment
Спасибо! Кажется, это оно! Я добавил работающий плунжер, демонстрирующий, что он работает. Мы постараемся реализовать это в нашем проекте как можно скорее и сообщим вам. - person LeoLozes; 08.02.2016
comment
Это определенно лучший выбор. Я также пытался реализовать его с помощью директивы transcluded, но безуспешно. Большое спасибо! - person troig; 08.02.2016

arrow_upward
3
arrow_downward

Этого можно достичь, комбинируя именованные представления и абстрактные состояния. «Ключом» здесь является определение абстрактного состояния с представлением для макета (или общего шаблона, если мы следуем номенклатуре вашего исходного сообщения).

Абстрактное состояние:

  .state('master', {
      abstract:  true,
      views: {
        generic_template: {
          templateUrl: 'genericTemplate.html'
        }
      }
    })

Затем вы должны установить это абстрактное состояние как родительское для дочерних представлений. Таким образом, дочернее представление унаследует общее представление шаблона. Пример:

.state('one', {
    url: '/one',
    templateUrl: 'one.html',
    parent: 'master'
})

В вашем index.html вы должны использовать именованное представление для общего шаблона, а внутри него — другое безымянное представление. Что-то вроде этого:

<body>

  <div ui-view="generic_template">
    <div ui-view></div>
  </div>

</body>

Вот плункер с полным рабочим примером. Надеюсь, поможет.

person Xavi Torrens    schedule 08.02.2016
comment
Я отредактировал свой вопрос, к сожалению, он не охватывает на 100% то, о чем я просил. Однако, спасибо! - person LeoLozes; 08.02.2016