Директива AngularJs создает фиксированный div на странице - PullRequest
Новая
       8

Директива AngularJs создает фиксированный div на странице

0 голосов
/ 04 июня 2018

В настоящее время я разрабатываю дерево документов в AngularJS с использованием директивы.Он является частью страниц как компонент и размещается относительно любого другого компонента, который в данный момент находится на странице.

Как часть дерева документов, у меня есть модальная версия, которая отображается при выборе файла, отображая его информацию и доступные версии файла.

Но этот модальный режим необходимо исправить наэкран, так что пользователю не нужно прокручивать его вверх, чтобы увидеть его.

Но так как модальное является частью компонента дерева документа, просто установка его на фиксированный не делает этого.Он просто установил его в соответствии с директивой.

// This does not work.
.version-modal {
  position: fixed;
  top: 5vh;
  right: 2vw;
  bottom: 5vh;
  width: 480px;
}

Как можно установить фиксированную позицию в div с помощью директивы, которая может быть вложена в несколько уровней объектов dom с относительными позициями и размерами?Это работает, если я с помощью инструментов браузера перемещаю модальный div как дочерний элемент в , но выполнение кода через код нарушает работу приложения.

let bodyDiv = document.getElementById('body-container');
let versionDiv = document.getElementById('version-modal');
bodyDiv.appendChild(versionDiv);

Насколько я понимаю, при выполнении этого div теряет связь с $ scope, и все функции и члены теряются.

1 Ответ

0 голосов
/ 04 июня 2018

Фиксированное позиционирование должно работать независимо от того, где находится элемент в иерархии DOM.Было бы полезно иметь jsfiddle или подобное, чтобы взглянуть на эту проблему.В качестве альтернативы, HTML-код элемента был бы полезен.

Ваш CSS ссылается на .version-modal как класс, но вы успешно ссылаетесь на модальное значение, используя document.getElementById('version-modal').Имеет ли ваш элемент атрибут класса version-modal, а также атрибут version-modal id?

Возможно, вам просто нужно добавить class="version-modal" к вашему модальному сообщению или изменить правило CSS на: 

#version-modal {
  position: fixed;
  top: 5vh;
  right: 2vw;
  bottom: 5vh;
  width: 480px;
}
...