Как настроить ui-router вложенные представления

Я пытаюсь настроить мое приложение с помощью ui-router. Я знаком с основными вложенными представлениями, но я хочу сделать что-то более сложное. У меня есть основная настройка основных видов. Я хотел бы иметь всплывающее окно чата, которое имеет свои собственные представления, которые не зависят от основных представлений. Я хочу, чтобы иметь возможность перемещаться по основным представлениям и не влиять на состояния в всплывающем окне чата. Итак, как это делается? Нужно ли мне иметь абстрактное состояние для чата? а затем у вас есть вложенные представления?

вот визуальный. layout

и вот плукер

plunker

 $stateProvider
    .state('root', {
      abstract: true,
      views: {
        '@': {
            template: '<ui-view />',
            controller: 'RootCtrl',
            controllerAs: 'rootCtrl'
        },
        '[email protected]': {
            templateUrl: 'header.html',
            controller: 'HeaderCtrl',
            controllerAs: 'headerCtrl'
        },
        '[email protected]': {
            templateUrl: 'footer.html',
            controller: 'FooterCtrl',
            controllerAs: 'footerCtrl'
            }
       }
    })
    .state('root.home',{
        parent:'root',
        url:'/home',
        templateUrl:'home.html',
        controller: 'HomeController',
        controllerAs:'homeCtrl'
    })
     .state('root.about',{
        parent:'root',
        url:'/about',
        templateUrl:'about.html'
    });
});

Ответы

Ответ 1

Создайте службу/функцию чата с контроллерами в разных js файлах и введите index.html и script.js. используйте загрузочный лоток для всплывающих чатов.

Глядя на @plunkr, вы на правильном пути, хотя контроллер ввода из script.js через controllerAs не масштабируется для большего приложения.

Вместо этого вы можете создавать файлы js для каждого контроллера и службы и отдельные частичные представления, просто нужно добавить службы и контроллеры в index.html и указать частичные представления в функции stateprovider.

Ответ 2

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

Затем как?

Сделайте нижний колонтитул частью шаблона и используйте ng-include для рендеринга вашей нижней части.

<footer ng-include="'/footer.html'"></footer>

И внутри footer.html вы можете указать контроллер для просмотра нижнего колонтитула.

Преимущества

  • Не нужно обрабатывать нижний колонтитул в каждом состоянии.
  • Не нужно передавать историю чата при каждом изменении состояния.

Ответ 3

Я не уверен, хотите ли вы использовать маршрут для чата, но есть два способа для вас:

  • Использовать модалы, которые могут сжиматься и открываться при нажатии на кнопку facebook здесь Моды для начальной загрузки

  • Используйте углы ngHide ngShow

    Для вашей навигации во время использования на вспомогательных элементах в чате вы можете создать одно состояние для чата и навигации в чате чата в своем состоянии чата, чтобы любое изменение состояния не изменило ваши другие состояния чата. Это означает, что вам нужно будет использовать концепции subate ui-router