Используйте директиву для виджета в Angular?

Question

Должна ли использоваться директива в AngularJS для реализации виджета или контроллера/службы? Когда речь идет о виджетах, я думаю об элементе управления UI, с которым вы бы взаимодействовали, например, с контроллера. диалог, дерево, сетка, диаграмма.

Например, если бы я должен был создать виджет Dialog, я бы хотел вызвать функцию show() для виджета, чтобы отобразить диалог. Это не представляется возможным с помощью директив. Я видел используемую переменную, например. 'showDialog', в корневой области, которую директива наблюдает за этим. В angular-ui они используют службу для реализации диалога.

Answer 1

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

Отрегулируйте свое мышление: вместо «элемента управления UI, с которым вы бы взаимодействовали с контроллера» подумайте, MVC, введите «модель». Контроллер может изменить модель, установив значения в области, представление обрабатывает HTML, который будет отображаться для данной модели. Контроллер не должен взаимодействовать с HTML, напрямую манипулируя DOM.

В разметке вы можете иметь:

  <modal-dialog show="showPopup"> 

где showPopup является текущей переменной сферой (или выражение).

В вашей директиве вы создадите изолированный объект и используете '=' для параметра 'show'.

В шаблоне HTML вашей директивы вы должны использовать значение «показать», чтобы открыть диалог.

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

  <modal-dialog ng-show="showPopup"> 

Answer 2

В основном, Директивы используют в качестве шаблона для просмотра HTML.

Директива предотвращает дублирование кода и делает ваш HTML более понятным и простым в обслуживании.

Как я знаю, вы должны создать тег или класс как «указатель», чтобы связать директиву с DOM.

В соответствии с реализацией Dialog, использующей шаблон, вы можете использовать только сервис и отдельный контроллер.

Посмотрите на this description.

Вы не можете реализовать директиву Dialog.