AngularJS — Вы уверены, что знаете как работает ng-if?

[@tuchk4]

Она вообще никак не влияет на то, о чем написано в топике. Тем более в коммит меседже написано Also, with WebComponents it is normal to have custom elements in the DOM.

[@zgmnkv]

В angular ui bootstrap для модальных окон используют сервис, вместо директивы. Шаблон для модального окна передается в метод сервиса. Мне кажется, это более логичный подход для модальных окон, так как модальное окно как правило нужно открывать по какому-то событию, нежели привязывать жестко к значению какого-то логического выражения. Ну и модальное окно по логике не вписывается в шаблон основного документа, оно существует отдельно, и соответственно в dom должно быть тоже отдельно.

[@tuchk4]

Как по мне, то лучше, что бы элементы, которые взаимодейсвуют друг с другом (например кнопка «Show modal» и само окно) были максимально близко к друг другу, тем более если используется много темплейтов.

<button ng-click="show()">Show modal</button>
<modal>
  Hello, I am modal window
</modal>

И так код более читаемый и понятный. Все заивсит от проекта. Можно использовать вместо директивы и сервис, а шаблон брать text/ng-template, но у нас много чего построено на именно директивах.

[@tamtakoe]

Странное решение, конечно. А, вообще, такое поведение у всех исключаемых элементов (у ng-repeat, например), вместо элемента вставляется комментарий, чтобы Ангуляр мог узнать куда потом добавлять клон. Это поведение transclude: 'element'. Тогда в element функции link будет комментарий (якорь), а в cloneElement функции transclude копия элемента (шаблон)

[@tuchk4]

Решение как раз оказалось совсем не странное. Странно то, что мы автоматически перемещаем элемент из директивы в рутовый элемент. Но без этого никак:
— Как говорил выше, я считаю, что элементы которые взаимодействуют друг с другом должны быть расположены максимально близко друг к другу в исходном коде
— Если не перемещать элемент — то может поломаться его верстка (особенно если это сложные элементы — модальные окона, селект боксы, поповеры и так далее), так как он унаследует все CSS правила родителей.

К примеру popover:

<button popover-toggle>Add</button>
<popover>
  Hello! I am popover
</popover>

На много удобнее, если он находится возле кнопки, с которой взаимодействует.
Вполне возможно Shadow DOM будет в помощь :)

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

[@tamtakoe]

Мы в проекте используем ui-bootstrap и таких проблем не возникало. Там, кстати, в настройках элемента можно указать, куда будет аппендится тултип (и т. п.), к родителю или к боди

[@tuchk4]

А, вообще, такое поведение у всех исключаемых элементов (у ng-repeat, например), вместо элемента вставляется комментарий,

Да, но я посмотрел их исходники уже после того, как написал топик.