Множественные частичные виды на AngularJS

Question

У меня есть приложение AngularJS, которое имеет список содержимого в меню. Когда пользователь нажимает на элемент в меню, содержимое загружается на основной экран. Есть несколько типов контента:

Когда "1" нажата, видео загружается. При нажатии «2» загружается документ PDF и т. Д. Типы содержимого могут повторяться и быть сложными.

Теперь я устанавливаю $scope.content когда элемент щелкнул и, в зависимости от его contentType, я звоню другую директиву:

<div class="content" ng-switch on="content.contentType"> 
    <div ng-switch-when="video"> 
     <videoplayer-directive video="content"></videoplayer-directive> 
    </div> 
    <div ng-switch-when="pdf"> 
     <pdfreader-directive pdf="content"></pdfreader-directive> 
    </div> 
    <div ng-switch-when="..."> 
     <...-directive content="content"></...-directive> 
    </div> 
</div> 

Теперь у меня есть две проблемы:

1. Когда страница загружается, все шаблоны директив автоматически загружаются. Даже если у меня нет PDF-файла в меню, будет загружен шаблон и скрипты pdf.
2. В поисках этого я узнал, что директивы должны быть крошечными, а не целыми модулями моего приложения.

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

Answer 1

Это именно то, что UI-маршрутизатор для: Angular UI Router

Достойный учебник по scotch.io

Простейшее падение замены для вашего кода может быть просто использовать нг-если. Ng-if не будет указывать директиву до тех пор, пока она не будет вызвана. Просто убедитесь, что ваши директивы не перекроют внешний div, если это так, отключите выключение или добавьте еще один div, чтобы обернуть их.

<div class="content"> 
<div ng-if="content.contentType=='video'"> 
    <videoplayer-directive video="content"></videoplayer-directive> 
</div> 
<div ng-if="content.contentType=='pdf'"> 
    <pdfreader-directive pdf="content"></pdfreader-directive> 
</div> 
<div ng-if="content.contentType=='...'"> 
    <...-directive content="content"></...-directive> 
</div> 
</div>