Условные шаблоны в AngularJs

Question

У меня есть страница входа в систему, которая представляет собой просто простую форму в центре страницы без заголовка, нижнего колонтитула или боковой панели. Мои обычные страницы будут иметь боковую панель, верхний и нижний колонтитулы (эти 3 являются директивами). Я использую все свои шаблоны в ng-view, в зависимости от маршрутов. Я хочу разместить свои директивы за пределами ng-view, так как они будут распространены на всех страницах, кроме входа, и я не хочу, чтобы они были загружены при каждом изменении URL.

Как мне получить страницу входа без трех директив?

Answer 1

Я создал a small plunk, чтобы предложить вам решение вашей проблемы.

это основа решения:

<ng-include src="appVm.templatetoShow"> 
</ng-include> 

в AppController:

function AppController() { 
    this.templatetoShow = 'login.html'; 
    } 

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

После некоторого перечитания я сделал a new plunk, чтобы показать вам, как это можно сделать. Скрывающая часть проста, просто добавьте CSS в микс, и вы не увидите ничего из вашей главной страницы. . Добавлен клоакинг, чтобы предотвратить FOUC, и написал пару строк, чтобы показать систему аутентификации . Я представил пользовательскую службу, которую вы можете вводить везде, где вам нужны данные пользователя .

Это больше в чем вы хотели?

Answer 2

я не знаю, если я получаю то, что вы действительно хотите сделать, но я хотел бы предложить использовать нг-если

такие нг-если может выглядеть выглядеть следующим образом:

<div ng-if="notLogin"> here is Your navbar contents. Directies, anything You need </div> 

, а затем в контроллер -

$scope.notLogin = $location.path() !== "/login" 

Если у вас есть директивы колонтитулов, NavBars и т.д., я думаю, что вы можете сделать это в контроллере директивы и скрыть все содержимое директивы там, так что директива будет пустой.

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

Надеюсь, что вам нужно.

Answer 3

вы можете использовать ng-if для условного отображения/скрытия их в пользовательском интерфейсе. Обратите внимание, что ng-if отличается от ng-switch. Директива ngIf удаляет или воссоздает часть дерева DOM на основе выражения {expression}. Если выражение, присвоенное ngIf, оценивается как ложное значение, тогда элемент удаляется из DOM.

More details - https://docs.angularjs.org/api/ng/directive/ngIf 

Qucik Steps -

1. создать страницу оболочки и установить верхний и нижний колонтитулы, боковую панель и вид
2. использовать ng-if={{User.isLoggedin}} для верхнего колонтитула, боковой и войдите
3. установить User.isLoggedin в false, когда пользователь не зарегистрирован
4. Установите его как true, как только пользователь зарегистрировался в

Answer 4

Директивы разделяются между всеми видами, если вы используете тот же контроллер, однако использование разных контроллеров также не рекомендуется. что вам неудобно?

взглянуть на этот пост: https://stackoverflow.com/a/16213055/1218551

наилучшие пожелания :)