Как по ng-mouseenter вывести шаблон кастомной директивы?

Question

[descarado]

Я в angular новичек, постараюсь быть доходчивым.
Есть такой DOM:

<div ng-controller="MyCtrl">
 <div ng-mouseenter="innerPreview(id)"></div>
 <div ng-mouseenter="innerPreview(id)"></div>
 <div ng-mouseenter="innerPreview(id)"></div>
 /* сюда надо вывести темплейт кастомной директивы с нужными данными */
 <div id="preview" custom-directive></div>
</div>

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

Comments

[vasIvas]

Можно к директиве подключить её содержимое через template и скрыть её при помощи hidden.
Затем подключить к ней общий контроллер, который будет делать её видимой.

[descarado]

vasIvas: это не очень хорошо, потому что скрытых шаблонов директивы может быть много, большая нагрузка. нужно именно заменять при наведении содержимое #preview. Все данные для превью пришли одним запросом, но вываливать их и скрывать за раз не хочется, хочется рендерить их по необходимости (по наведению).

[vasIvas]

descarado: лично я не обладаю знаниями чтобы вступить с Вами в спор.. Но думаю раз Вы так утверждаете о том, что браузер берет в расчет содержимое, которое выходит за пределы экрана, значит Вы об этом читали. Не выдумываете же Вы, правда?)

[descarado]

vasIvas: Тут такой момент что будет куча элементов рендерится и скрыватся, а в определенной ситуации (на мобильных устройствах) мне эти данные не нужны вообще.

[vasIvas]

descarado: ну тогда просто не рендерить и все. А все что зависит от чего-то вынести на этам конфигурации приложения.

[descarado]

vasIvas: Так я и не рендерю) Вопрос в том как отрендерить при определенном событии, взяв шаблон с нужными данными из кастомной директивы.

[vasIvas]

descarado: если честно, то я не знаю есть ли у angular какие-то флаги или ещё что-то, что могло бы заставить директиву не рендерить шаблон при инициализации. Но зато я точно знаю, что в директиве можно создавать html самому. То есть в dom Вы пишите , а в самой директиве уже собирать html, добавляя его по событию в element. Событие может быть как из прилинкованного контроллера, так и из сервиса, который мог б определять среду в которой запущено приложение.

[descarado]

vasIvas: решил проблему, очень просто) при инициализации у меня рендерится последняя превьюшка, а по ховеру я меняю ее id и соответственно шаблон директивы тоже меняется) всего-то двухсторонняя магия Angular) Все же спасибо, я только учусь)

Answer 1

[Сергей Протько]

ng-include