Что лучше использовать для реализации автоподсказок в AngularJS?

Question

[Die_Gelassenheit]

Правильно ли я понимаю, что лучше всего для того, чтобы работать с поведением конкретного элемента в AngularJS, правильнее всего использовать директивы?
Например, я хочу сделать форму с автоподсказками, которые будут формироваться из предустановленных значений + тех, которые уже введет в форму.
Стоит ли использовать для этого связку директивы (чтобы менять html элемента и дорисовывать выпадающий список подсказок) и сервиса (в котором будут храниться актуальные значения инпутов)? Насколько вообще правильно использовать директивы для таких динамических вещей?

Answer 1

[Никита Гущин]

Директива в этом случае сделает код реюзабельным - Вы сможете сделать вторую форму и использовать на ней этот же код. Другими словами - использование директивы полностью оправдано.

А насчет:

сервиса (в котором будут храниться актуальные значения инпутов)

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

автоподсказками, которые будут формироваться из предустановленных значений + тех, которые уже введет в форму

Comments

[Die_Gelassenheit]

У меня основная проблема возникла с актуальными значениями инпутов. Создалось впечатление, что директива парсится и компилится один раз при инициализации ангуляра для страницы, и потом остается статичной - новые данные директива не видит, даже если не изолировать скоуп. Оттуда и возник вопрос, насколько директива пригодна для динамических данных.

[Никита Гущин]

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

[Die_Gelassenheit]

iNikNik: да, на самом деле просто неправильно передавал данные изолированный скоуп.

Answer 2

[Alexey Ivanov]

Думаю тут лучше всего использовать две директивы:
1. Одну для формы, например HintForm. В ней объявите контроллер директивы, в котором вы будете хранить актуальные значения инпутов.
2. Для самих инпутов, например Hint. При объявлении директивы укажите require: ^HintForm, тогда в функции link вам будет доступен контролер из HintForm. При изменении значения в инпуте вы будете записывать его (значение) в контроллер HintForm. Поскольку контроллер HintForm шарится между всеми Hint-ами, то через него любая директива Hint будет знать актуальные значения инпутов во всей форме.

Это похоже на то, как директива form взаимодействует с вложеными директивами ng-model.

Пример: http://plnkr.co/edit/TQQWJflPSQx5jDh097bM

Comments

[Die_Gelassenheit]

Спасибо за ответ! На самом деле, получилось сделать еще проще: одна директива, которая берет список подсказок из изолированного скоупа, который через two-way binding поддерживается актуальным. А сам скоуп обновляется при помощи функции, которая по ng-change ходит и добавляет новое значение в список для подсказок (если там его еще нет).
Но ваше решение выглядит более красивым и удобным для повторного использования кода.