Запустите Javascript после изменения DOM

Question

Запустите Javascript после изменения DOM

0

Я написал две пользовательские директивы.

Их имена - приложение-контент и элемент приложения-контента. Предполагается, что они будут использоваться в рамках некоторых будущих проектов, чтобы дать этим проектам базовый эшафот с базовым стилем. Они будут частью модуля. Предполагается, что они должны быть вложены следующим образом:

<app-content>
    <app-content-item>
        html...
    </app-content-item>
    <app-content-item>
        html...
    </app-content-item>
    .
    .
<app-content>

В рамках функции связи приложения-контента я вызываю метод, который ищет дочерние директивы для элементов app-content-item-tags и устанавливает ширину и высоту этих элементов с использованием определенного алгоритма и доступного пространства в приложении-контент- контейнер.

Что касается, как я знаю, желаемого макета не может быть достигнуто только с помощью css. Должен быть задействован какой-то javascript.

Прямо сейчас я отказываюсь от углового $ timeout-сервиса без задержки, чтобы вызывать функцию после выданной директивы. Этот фрагмент кода взят из функции ссылок на директивы app-content:

$timeout(function(){
    scaleLayout();
});

Пока это прекрасно.

Проблема в том, что контейнеры app-content-item-контейнеры будут заполняться приложением, используя мой компонент. Это означает, что содержимое контейнеров app-content-item может меняться в любое время. Если они меняются, функция scaleLayout() должна быть вызвана снова.

Я не хочу, чтобы пользователь моего компонента отвечал за вызов метода. Компонент должен быть черным ящиком для пользователя как можно больше.

Для пользователя моего компонента он должен чувствовать, что это делается css, поэтому ему не нужно беспокоиться об этом.

До сих пор я пробовал следующие подходы:

DOMSubtreeModified-Event (слишком часто срабатывает и приводит к сбою приложения)
Установка наблюдателя на элементы html (запуск слишком рано)

Simon 20 июль 2015, в 09:27

Источник

0

Ваш app-content-item-container является объектом? Вы можете обнаружить событие изменения или заставить пользователя вызвать функцию container.add, а затем использовать эту функцию для запуска события изменения.
softwarenewbie7331 20 июль 2015, в 07:13

Теги:

javascript

html

angularjs

1 ответ

Ещё вопросы

Ваш app-content-item-container является объектом? Вы можете обнаружить событие изменения или заставить пользователя вызвать функцию container.add, а затем использовать эту функцию для запуска события изменения.

Chris Lonardo · Answer 1 · 2015-07-20T04-58-00.000Z

1

Используйте обработчики событий. При внесении изменений:

$rootScope.$broadcast("updateLayout");

А для слушателя:

$scope.$on('updateLayout', function () {
       //layout stuff here
    });

Chris Lonardo 20 июль 2015, в 04:58

0

Но таким образом, трансляция мероприятия должна выполняться разработчиком с использованием моего компонента. Это был бы мой план б. Но я действительно пытаюсь не допустить пользователя моего компонента в это ...
Simon 20 июль 2015, в 06:44
0

Если я правильно понимаю - когда вы разрабатываете API для своего компонента, это должно быть то, что вы можете встроить, чтобы оно было прозрачным для пользователя. Вы говорите о чем-то, что по своей сути обусловлено событиями, так почему бы не запустить его, когда заполнятся app-content-item-container? В противном случае, если вы используете обещания при заполнении контейнеров, вы можете связать элементы макета до их завершения.
Chris Lonardo 20 июль 2015, в 06:49
0

Приложение, использующее мой компонент, может добавлять контент в app-content-items в любое время. Например: приложение может загружать данные из rest-webservice при начальной загрузке и встраивать эти данные в app-content-items с помощью некоторого ng-repeat. На этом этапе app-content-item уже заполнен, и скрипт макета должен быть запущен снова.
Simon 20 июль 2015, в 07:05

Показать ещё 1 комментарий