Пишу про разработку вообще и в частности про: JavaScript, HTML5, CSS3, AngularJS, ReactJS, Agile.

Как использовать ng-model в новой директиве – AngularJs

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

Итак, ng-model позволяет нам связать данные из поля ввода с переменной в скопе. Получается очень удобно – как бы часто пользователь не менял бы там текст, мы можем рассчитывать на то, что ангулар автоматически все обновит и в переменной, которая к этому полю привязана. Однако ng-model работает только с узким кругом родных html тегов вроде input, select и т.п. нам нужно придумать что-то иное.

В нашем случае нужно ввести дополнительный атрибут тега , который передавал бы данные из директивы во внешний скоп:

В этом случае переменная result будет хранить полученные данные из директивы и можно будет выводить их во внешний скоп:

В самой же директиве нужно объявить новый атрибут в объекте скопа:

Ну и конечно, передавать в него данные когда выбирается элемент:

Рабочий пример:

See the Pen Как использовать ng-model в новой директиве by Artem Demo (@artemdemo) on CodePen.

Ссылки по теме:
Поиск с выпадающим списком на ангулар

Поделиться:
comments powered by Disqus