Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 04.03.2015, 23:11
Аспирант
Отправить личное сообщение для desperado Посмотреть профиль Найти все сообщения от desperado
 
Регистрация: 26.08.2014
Сообщений: 51

Многократное использование общей директивы
Всем привет. Подскажите как лучше сделать решение.

Мы имеем к примеру диалоговое всплывающее окно (которое вызывается при клике по DOM элементу), в котором показываем информацию, которую нам выдаст сервер.

В чем собственно вопрос - как в одну директиву подсовывать разные другие директивы? Главная общая директива имеет каркас модального окна. Далее, если мне нужно там вывести видео, я вывожу директиву-видео плеер, если надо там вывести картинку - вывожу картинку, если аудио - аудио плеер. Вот такая задумка. Что посоветуете.
Ответить с цитированием
  #2 (permalink)  
Старый 05.03.2015, 00:31
Аватар для MetaDriver
Аспирант
Отправить личное сообщение для MetaDriver Посмотреть профиль Найти все сообщения от MetaDriver
 
Регистрация: 24.04.2014
Сообщений: 66

Сообщение от desperado Посмотреть сообщение
В чем собственно вопрос - как в одну директиву подсовывать разные другие директивы? Главная общая директива имеет каркас модального окна. Далее, если мне нужно там вывести видео, я вывожу директиву-видео плеер, если надо там вывести картинку - вывожу картинку, если аудио - аудио плеер. Вот такая задумка. Что посоветуете.
http://angular-ui.github.io/bootstrap/
Смотри там "modal". Это директива модального окна. В неё засовываешь любые шаблоны, в том числе по условию (ng-include способна брать на вход функцию, в функции через switch возвращаешь нужный шаблон (URL) с нужными тебе директивами).
Ангуляр вполне сообразительный, сам всё скомпилирует и подключит. Другое дело, что тебе придётся ещё при вызове окна, пробросить в него все нужные для текущего шаблона переменные.
Разберёшься, там примеры есть.
Ответить с цитированием
  #3 (permalink)  
Старый 05.03.2015, 09:08
Аспирант
Отправить личное сообщение для desperado Посмотреть профиль Найти все сообщения от desperado
 
Регистрация: 26.08.2014
Сообщений: 51

Спасибо, но бутстрап мне не оч подходит, т.к. стили окна совсем другие, да и не хочется тянуть весь бутстрап ui из-за модального окна, что то полегче поищу.

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

Что бы типа в контроллере проверять данные в скоп, и в зависимости от них, подсовывать шаблон в директиву.
Ответить с цитированием
  #4 (permalink)  
Старый 05.03.2015, 11:39
Аватар для MetaDriver
Аспирант
Отправить личное сообщение для MetaDriver Посмотреть профиль Найти все сообщения от MetaDriver
 
Регистрация: 24.04.2014
Сообщений: 66

Сообщение от desperado Посмотреть сообщение
Мне интересен сам процесс засовывания в директиву любых других шаблонов по условию и передачу всяких переменных. Можно какой то примерчик такой директивы?
В директиву под рукой нет. Но прынцып тот-же, плюс-минус мелкие тонкости. Вот кусок конфигурации маршрутизатора (ui-router):
.state('LpWork.Memorials.Main', {
         url: "/:pgName",
         controller: 'PmtMainCtrl',
*!*        
         templateUrl: function($stateParams){
            switch ($stateParams.pgName) {
               case 'main':
               case null:
               { return ""; }
//               { return "partials/memorials-Home.html"; }
               case 'card' : return "partials/memrCard-Work.html";
               default : return "partials/memorials-Work.html";
*/!* 
           }
         }
      })
Пометил, где по условию выбирается шаблон. templateUrl берёт на вход либо строку либо функцию возвращающую строку. Заметь, точно так же (по условию) можно подсунуть контроллер (заранее сконфигурированный), т.е. у меня сейчас имя контроллера задано строкой, а могла бы быть функция, возвращающая строку.
Цитата:
Что бы типа в контроллере проверять данные в скоп, и в зависимости от них, подсовывать шаблон в директиву.
А вот тут тонкость - в контроллере директивы выбирать шаблон не получится. Только в функции компиляции, чтоб вовремя скомпилировать всё содержимое ($transclude) директивы. У меня примера готового нет, но можешь глянуть как это делается в стандартных директивах (типа ng-if). На англо-сайте в каждом разделе api-доков есть кнопочка "глянуть исходник", с переадресацией точно (ну почти ) к нужному месту исходника. Это удобнее, чем качать целиком исходники и там рыться.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
JavaScript. Уровень 3в. Серверное программирование на Node.js maxy666 Node.JS 8 10.08.2014 00:36