Я пытаюсь создать всплывающий компонент / директиву, которая позволяет транслируемому контенту появляться во всплывающем окне. Учитывая, что всплывающее окно должно отображаться над всем остальным содержимым и игнорировать любые атрибуты переполнения, имеет смысл, что оно находится на уровне документа (т. Е. В теге body).
Но я хотел бы иметь возможность указать содержимое всплывающего окна в любом компоненте на странице, например так:
<div class="custom-component">
<header>Some component things</section>
<popup show="$ctrl.onSomethingHover">
<!-- More angular components here -->
</popup>
</div>
Однако, похоже, что включение таким образом не работает на вложенных контроллерах.
Вот как я предполагал, что это будет работать на уровне документа:
<body>
<popup-wrapper ng-transclude="popup">
<!-- The contents of <popup> should appear here -->
</popup-wrapper>
<div ui-view="content">
<!-- Many layers of components in here -->
<!-- A nested child component may wish to show a popup, so would include: -->
<popup show="$ctrl.someLocalCondition">
<h3>Hey, Nice Popup!</h3>
<custom-directive></custom-directive>
<custom-button></custom-button>
<custom-map></custom-map>
</popup>
</div>
</body>
Когда я попробовал эту настройку, <popup>, который был указан во вложенном дочернем компоненте, не проецировался в <popup-wrapper>. Я могу только предположить, что включение включено для прямых потомков компонентов.
Я также пытался добавить элемент к телу во время фазы link (показано ниже). Это работало до некоторой степени, но, очевидно, не учитывало обновления через цикл дайджеста, поскольку затем оно было отделено от углового
.directive('popup', function () {
return {
restrict: 'E',
controller: function () { },
template:"<div class='popup-inner' ng-transclude></div>",
transclude: true,
link: function (scope, element) {
angular.element('body').append(element);
}
};
})
Может кто-нибудь предложить какой-либо совет или решение этой проблемы?
Примечание: мне очень удобно, чтобы всплывающее окно отображалось в правильной позиции, я просто не уверен, как заставить работать трансклюкс / проекцию контента