Не так давно я уже писал про поведение ng-if директивы, но тогда я столкнулся с проверкой условия, но сегодня возникла другая проблема.
В проекте достаточно много таких элементов как tooltip, popover, modal windows и так далее. Думаю, все вы понимаете, что это за элементы и рассказывать про них я не буду. Для многих из них используется абсолютное позиционирование. Если бы мы не использовали кастомные директивы, то проблем бы не было — все модальные окна лежали бы в конце body и показывались бы когда нужно. Но так, как все эти элементы объявлены как директивы, возникает проблема с позиционированием, так как у директивы может быть родитель с относительным позиционированием и так далее.
<div style="position: relative; overflow:hidden">
<button ng-click="visible = true">Greeting</button>
<modal visible="visible">
Hello, Habr!
</modal>
</div>
Модальное окно должно позиционироваться относительно окна браузера, но в данном случае будет позиционироваться относительно родительского элемента.
Самое простое решение этой проблемы — вынести элемент из текущей директивы:
module.directive('modal',[
'$rootElement',
function(
$rootElement
){
return {
restrict: 'E',
...
link: function(scope, element){
element.appendTo($rootElement);
scope.$on('$destroy', function(){
element.remove();
});
...
}
}
}]
});
То есть мы выдераем элемент из текущего контекста и вставляем в рутовый элемент приложения. При удаление директивы — элемент удаляется. Все вроде ОК, но проблем не возникает до тех пор, пока в паре с таким подходом не используется ng-if директива.
ng-if при отрицательном результате условия полностью удаляет DOM элемент, это я думаю многие знают, но не многие знают как это происходит.
Вот исходники и собственно сам watcher ng-if атрибута.
При положительном результате — создается комментарий document.createComment(' end ngIf: ' + $attr.ngIf + ' '); и в переменную block.clone помещается два значения:
- 0 — сам элемент, для которого была объявлена
ng-ifдиректива - 1 — созданный комментарий
В исходном коде страницы вы скорее всего часто видите подобное:
На данном скриншоте — условие
ng-if="!task.id"— положительное и элемент li, для которого объявлена директива есть в DOM дереве и находиться между комментариями<!-- ngIf: !task.id -->и<!-- end ngIf: !task.id -->. Второе условиеng-if="validation.task.app_id"— отрицательное и между комментариями нету ничего.
При отрицательном результате — destroy дочернего scope и удаление элементов. И самое интересное в функции getBlockElements:
/**
* Return the DOM siblings between the first and last node in the given array.
* @param {Array} array like object
* @returns {DOMElement} object containing the elements
*/
function getBlockElements(nodes) {
var startNode = nodes[0],
endNode = nodes[nodes.length - 1];
if (startNode === endNode) {
return jqLite(startNode);
}
var element = startNode;
var elements = [element];
do {
element = element.nextSibling;
if (!element) break;
elements.push(element);
} while (element !== endNode);
return jqLite(elements);
}
Что делает эта функция понятно из её описания — Return the DOM siblings between the first and last node in the given array.
А аргумент nodes в нашем случаем массив из двух элементов, которые я описывал ваше. То есть функция вернет все элементы между основным элементом, для которого была объявлена директива ng-if и закрывающим комментарием <!-- eng ngIf: .... -->, а если комментарий не был найден — то вернет все элементы после основного.
К примеру, такой темплейт (#angular-application — рутовый элемент приложения):
<div id="angular-application">
...
<div style="position: relative; overflow: hidden">
<div style="position: absolute; right: 0; bottom: 0">
<modal ng-if="isFirstModal()" id="modal-1">...</modal>
<modal ng-if="isSecondModal()" id="modal-2">...</modal>
</div>
<div style="position: absolute; left: 0; bottom: 0">
<popover ng-if="isFirstPopover()" id="popover-1">...</popover>
<popover ng-if="isSecondPopover()" id="popover-2">...</popover>
</div>
</div>
...
</div>
Компилится в такой html:
<div id="angular-application">
...
<div style="position: relative; overflow: hidden">
<div style="position: absolute; right: 0; bottom: 0">
<!-- ngIf: isFirstModal() -->
<!-- end ngIf: isFirstModal() -->
<!-- ngIf: isSecondModal() -->
<!-- end ngIf: isSecondModal() -->
</div>
<div style="position: absolute; left: 0; bottom: 0">
<!-- ngIf: isFirstPopover() -->
<!-- end ngIf: isFirstPopover() -->
<!-- ngIf: isSecondPopover() -->
<!-- end ngIf: isSecondPopover() -->
</div>
</div>
...
<div id="popover-1" class="popover">...</div>
<div id="modal-1" class="modal-window">...</div>
<div id="modal-2" class="modal-window">...</div>
<div id="popover-2" class="popover">...</div>
</div>
То есть, как было написано выше — все модальные окна и поповеры, что бы не нарушалось позиционирование и их верстка перенесены в конце приложения, но комментарии остались на прежнем месте. И теперь, функция getBlockElements для <popover ng-if="isFirstPopover()" id="popover-1">. — вернет все элементы — #popover-1,#modal-1, #modal-2, #popover-2. То есть при отрицательном результате условия ng-if="isFirstPopover()" из DOM дерева будут удалены все эти элементы.
Варианты решения:
- Не делать так :) Не переносить элементы из директивы. Но такой вариант не подходит для сложных директив. К примеру у нас проекте есть кастомный фильтр для таблицы, который представлен одной директивной, но включает в себя кнопку, поповер, и модельное окно. И если не переность элемент — верстка внутри директивы ломается, и позиционирование активных элементов — тоже становится не верным.
- Изначально размещать элементы в нужных местах. Тоже не подходит для меня, так как я считаю, что элементы должны находиться максимально близко к тем элементам, с которыми они взаимодействуют.
- Не использовать ng-if в таких случаях. Именно так мы и поступили. Чуть чуть изменили код, но зато все работает.
- Можно попробовать изменить приоритеты для директив. Приоритет кастомный директивы должен быть выше, чем у
ng-if, то есть выше 600. - Переносить не рутовый элемент директивы, а дочерный. То есть:
element.find('[append-to-root]').appendTo($rootElement); - Не объявлять для элемента
ng-ifдирективу, а обернуть её:<div ng-if="condition"> <my-custom-directive>...</my-custom-directive> </div>
Автор: tuchk4
