Несколько шаблонов AngularJS на одной странице

У меня есть индекс, который служит для статического меню заголовка, а ниже - ng-view, основанный на маршруте, выбирает правильный шаблон. Как это, например:Несколько шаблонов AngularJS на одной странице

<navbar> 
    ... 
</navbar> 
<div ng-view> 
</div>

Все хорошо до сих пор, когда конкретный маршрут попал, шаблон загружается в этом контейнере с соответствующим контроллером.

Теперь у меня есть другая страница, загружаемая внутри ng-view, и она запускается при попадании url "/ dashboard". Проблема в том, что на странице панели мониторинга есть меню боковой панели, которое также должно содержать некоторую логику маршрутизации (более или менее). Когда ссылка была нажата из меню боковой панели, мне нужно загрузить только левую сторону страницы (не весь контейнер ng-view).

Я определил два решения:

1) Создайте директиву, которая хранит это меню боковой панели, и ввести его во всех страницах, которые обрабатываются с помощью меню боковой панели ==> Маршрутизация по-прежнему обрабатывается ng- Посмотреть.

2) Используйте нг-включать и имеют определенную логику маршрутизации на странице приборной панели, как это:

<a ng-click="templateType = 1">Template 1</a> 
<a ng-click="templateType = 2">Template 1</a> 

<div ng-if="templateType === 1" ng-include="template1" 
    ng-controller="Template1Controller"></div> 
<div ng-if="templateType === 2" ng-include="template2" 
    ng-controller="Template2Controller"></div>

Есть ли другой подход? Или что лучше всего подходит для обработки как боковой панели, которая обрабатывает некоторые маршруты, так и статического меню, которое обрабатывает другие маршруты, с упоминанием о том, что меню боковой панели доступно только на некоторых маршрутах.

Я предоставил рисунок для рисования в надежде, что я могу лучше объяснить свою проблему.

enter image description here

источник

2015-06-11 Rus Paul

Почему бы вам не использовать угловую-UI-маршрутизатор? – nikhil

Вы также можете проверить [угловой маршрут-сегмент] (http://angular-route-segment.com/). –

@nikhil Я подумал, может быть, было встроенное решение, не добавляя еще одну внешнюю зависимость. –

Вы можете использовать UI-маршрутизатор и дать выстрел в вложенных просмотрах. Вот really good tutorial. Я думаю, что то, что вы пытаетесь достичь, упоминается в конце урока.

источник

2015-06-11 11:15:44 Freezystem

Это не работает для меня, потому что для выполнения их маршрутизации требуется большая работа, изменяющая текущее приложение. –

UI-Router не отличается от ngRouter. Он управляет состояниями против маршрутов, routeParams становятся stateParams и u-view заменяют оригинальную директиву ng-view. Затем вы можете ссылаться на свои маршруты с помощью ui-sref (действительно полезно) или просто с href. Но я понимаю вашу точку зрения. Я думаю, вы можете использовать параметры ngRoute, чтобы определить, какой подэлемент отображать, но может быть немного сложнее. :) – Freezystem

UI-Router кажется очень приятным, но у моего приложения есть ~ 150 различных маршрутов, распространяемых по большим количествам модулей, и для их реализации потребуется выполнить модификацию каждого из них, чтобы соответствовать реализации UI-Router. В этот момент я предпочел бы сделать директиву для боковой панели, и я ее внедряю везде, где она мне нужна. –

Как и все другие, вам необходимо перейти на UI-маршрутизатор и вложенные представления. Это отличный способ настроить макет страницы.

Вы можете найти ответ в Angular UI-Router How to create a "layout" state?

источник

2015-08-11 02:18:48 Hacker

Несколько шаблонов AngularJS на одной странице

ответ

Смежные вопросы