0

на форме есть два именованных ui-view

<div ui-view="form"></div>
<div ui-view="body"></div>

В одном, по задумке, должны отображаться формы (авторизация и т.д.), во втором сама страница. Задумка такая, что бы при авторизации или любом появлении формы на странице продолжал отображаться контент в <div ui-view="body"></div>. Но не получается. $stateProvider организован как-то так:

$stateProvider
  .state('about', {
    url: '/about',
    views: {
      body: {
        templateUrl: 'templates/page.about.html'
      }
    }
  })
  .state('auth', {
    url: '/auth',
    views: {
      form: {templateUrl: 'templates/form.auth.html'}
    }
  })

Сейчас, если путь /auth то в <div ui-view="body"></div> пусто. Подскажите, как правильно настроить $stateProvider, что бы контент из body не пропадал.

9
  • судя по аналогичному plunkr все работает, можете его поменять так, чтобы ваша проблема воспроизвелась?
    – Grundy
    31 дек 2015 в 11:59
  • Вот именно, что в Вашем планкере воспроизводится моя ситуация один в один. Нужно что бы оба ui-view одновременно отображали информацию.
    – DenniLa2
    31 дек 2015 в 15:57
  • тогда поведение абсолютно логичное - вы указываете один view - он и заполняется. Если укажете два -заполнятся два. мне кажется вопрос нужно конкретизировать, возможно привести картинки как сейчас и как хотите чтобы было
    – Grundy
    31 дек 2015 в 16:19
  • к тому же если вы хотите показывать одни и те же view - зачем вам два state?
    – Grundy
    31 дек 2015 в 16:21
  • Мне кажется что я выразился однозначно. Вью form предназначено только для форм. А вью body - для контента. Т.к. форма может появиться при любом контенте и он при этом не должен пропасть и было создано два вью. Т.к. контент в body в момент появления формы может быть любым - я для state: auth не описывал view: body. Возможно есть способ прописать вью body динамически, подставив туда текущее содержимое body в момент показа формы?
    – DenniLa2
    31 дек 2015 в 20:01

1 ответ 1

1

В данном случае вы имеете два не связанных между собой состояния, в каждом из которых устанавливается только одно из двух view.

самое простое решение добавить в состояние оба view

.state('about', {
  url: '/about',
  views: {
    body: {
      templateUrl: 'templates/page.about.html'
    },
    form: {
      templateUtl: '...'
    }
  }
})

Кроме того, значением templateUtl может быть функция, в которой можно проверить какие-нибудь условия и вернуть url, в этом случае форма покажется, либо не вернуть ничего, в этом случае форма не покажется.

form:{
  templateUrl: function(){
    if(something)
        return 'state2.html'
  }
}

В качестве одного из решений можно так же использовать nested states - вложенные состояния и вложенные view.

Идея заключается в том, что добавляется вложенное состояние auth устанавливающее view только для формы

.state('about.auth', {
  url: "/auth",
  views: {
    'form@': {
      templateUrl: 'state2.html'
    }
  }
}) 

Рабочий пример на Plunkr

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.