Присоединить дополнительные функции к родительскому контроллеру в Angular

0

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

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

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

<x set-in-view-when="something.item === selectedItem">

Это всего лишь пример некоторого элемента X с применяемой директивой атрибута.

Дело в том, что я хотел бы, чтобы мои выпадающие элементы списка (LIs), чтобы иметь эту директиву для них, поэтому, когда пользователь перемещается по ним с помощью клавиатуры, он автоматически прокручивает их в поле зрения, когда они получат видимый видовой экран. Являются ли эти элементы отображаемыми в прокручиваемом контейнере или в целом в списке дольше, чем окно просмотра браузера, не имеют особого значения.

Основная идея - прокрутка для выбора списка выпадающего списка. Должно ли это прокручивать главное окно.

Проблема

Я могу сделать свою директиву setInViewWhen полностью независимой, но это означает, что мне придется искать ближайший прокручиваемый контейнер при изменении условий на элементе. Это, кажется, довольно немного обработки, которую я бы хотел избежать, чтобы повторить (мне нужно пересечь DOM вверх, проверяя каждый узел, вычисленное свойство таблицы стилей OverflowY + некоторые дополнительные проверки.

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

Вопрос 1

Как я могу поделиться этими знаниями между директивами братьев и сестер? Если бы я должен был запустить событие, я не мог знать, являются ли приемники братьями и сестрами или нет без какой-либо дополнительной обработки.

вопрос 2

Вместо проверки для прокручиваемого контейнера каждый раз, когда мое условие директивы становится истинным, я мог бы теоретически изменить родительский родительский openDropdownItems чтобы сначала выполнить его первоначальное выполнение, а затем выполнить проверку прокрутки и использовать его результат вместе с моим условием. Я могу получить доступ к выпадающему контроллеру в моей директиве через директиву, requires свойства и отрегулировать его в фазе пост-ссылки.

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

Что бы вы посоветовали, как это сделать?

  • 1
    Некоторые мысли / наблюдения: (1) Для Q1, нет прямого способа для директив родного брата общаться друг с другом. Я обычно создаю родительскую директиву-обертку для передачи сообщений. (2) Я полагаю, что условие something.item === selectedItem вводит часы; для списка избранных предметов это может быть много часов и вредно для производительности. Я бы предпочел, чтобы в родительском элементе LI было одно наблюдение, и добавил бы логику «прокрутки в поле зрения».
  • 1
    (3) Имея в виду пункт 2, вы все равно можете иметь setInViewWhen директиву setInViewWhen (кажется полезной) и иметь совместно используемый контроллер вашей директивы замены X -select. Например, создайте сервис с общей функциональностью, создайте угловое значение, содержащее «класс» JS, и из него setInViewWhen директив setInViewWhen и X (или других решений).
Показать ещё 4 комментария
Теги:
angularjs-directive

1 ответ

0
Лучший ответ

Подведем итоги:

  • Для Вопроса 1 нет прямого пути к тому, чтобы директивы sibling могли общаться друг с другом. Обычно я создаю родительскую директиву обертки для передачи сообщений.
  • Согласно комментариям, условие something.item === selectedItem представляет часы; для списка избранных элементов это может быть много часов и вредно для производительности. Даже если это не происходит сейчас, это ловушка, и кто-то может быть привлечен к использованию этого для длинного списка предметов в будущем. Я предпочел бы иметь одну чашку в родительском элементе <li> и добавить туда логику "прокрутки в точку зрения".
  • Имея в виду предыдущую точку зрения, вы все равно можете иметь автономную директиву setInViewWhen (кажется полезной) и иметь контроллер вашего X -select кода замены с ним. Например:
    • услугу, содержащую общую функциональность,
    • угловое значение, содержащее базовый класс (Typcript или JS), и контроллер от директив setInViewWhen и X распространяется от него
    • или любое другое решение, удобное для вашего случая
  • В связи с вопросом 2: дети могут потребовать от своего родителя и изменить метод в нем (этот метод даже одобрен Angular, см. ng-model и custom controls, где они переопределяют ngModel.$render(), заменив его). Однако если вы это сделаете, многие дети изменят метод родителя, что может привести к беспорядку.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню