В настоящее время я изучаю AngularJS, и мне трудно понять разницу между ng-bind
и ng-model
.
Может кто-нибудь сказать мне, как они отличаются и когда один должен использоваться над другим?
В настоящее время я изучаю AngularJS, и мне трудно понять разницу между ng-bind
и ng-model
.
Может кто-нибудь сказать мне, как они отличаются и когда один должен использоваться над другим?
ng-bind имеет одностороннюю привязку данных ($ scope -> view). Он имеет ярлык, {{ val }}
который отображает значение области, $scope.val
вставленное в HTML, где val
это имя переменной.
ng-модель предназначена для размещения внутри элементов формы и имеет двустороннюю привязку данных ($ scope -> view and view -> $ scope) например <input ng-model="val"/>
.
Ответ Тоша доходит до сути вопроса. Вот дополнительная информация ....
Фильтры и форматеры
ng-bind
иng-model
оба имеют концепцию преобразования данных перед их выводом для пользователя. Для этогоng-bind
используются фильтры , аng-model
используются форматеры .фильтр (ng-bind)
С помощью
ng-bind
вы можете использовать фильтр для преобразования ваших данных. Например,<div ng-bind="mystring | uppercase"></div>
,или проще:
<div>{{mystring | uppercase}}</div>
Обратите внимание, что
uppercase
это встроенный угловой фильтр , хотя вы также можете создать свой собственный фильтр .форматтер (ng-модель)
Чтобы создать модуль форматирования ng, вы создаете директиву, которая делает это
require: 'ngModel'
, что позволяет этой директиве получить доступ к ngModelcontroller
. Например:Тогда в вашем частичном:
По сути, это
ng-model
эквивалентно тому, что делаетuppercase
фильтр вng-bind
приведенном выше примере.Парсеры
А что если вы планируете разрешить пользователю изменять значение
mystring
?ng-bind
имеет только один способ привязки, от модели -> вид . Однакоng-model
можно выполнить привязку из вида -> модель, что означает, что вы можете разрешить пользователю изменять данные модели, а с помощью синтаксического анализатора вы можете упорядочить данные пользователя. Вот как это выглядит:Играйте с живым плункером
ng-model
примеров форматера / парсераЧто еще?
ng-model
также имеет встроенную проверку. Просто измените$parsers
или$formatters
функцию для вызова ngModel «scontroller.$setValidity(validationErrorKey, isValid)
функции .В Angular 1.3 есть новый массив $ validators, который вы можете использовать для проверки вместо
$parsers
или$formatters
.Angular 1.3 также имеет поддержку получения / установки для ngModel
источник
ngModel
Директива ngModel связывает input, select, textarea (или пользовательский элемент управления формы) со свойством в области.Эта директива выполняется на уровне приоритета 1.
Пример Плункер
JAVASCRIPT
CSS
HTML
ngModel отвечает за:
ngBind
Атрибут ngBind сообщает Angular заменить текстовое содержимое указанного элемента HTML значением данного выражения и обновить текстовое содержимое при изменении значения этого выражения.Эта директива выполняется на уровне приоритета 0.
Пример Плункер
JAVASCRIPT
HTML
ngBind отвечает за:
источник
Если вы колеблетесь между использованием
ng-bind
илиng-model
, попробуйте ответить на следующие вопросы:Да:
ng-bind
(односторонняя привязка)Нет:
ng-model
(двусторонняя привязка)Да:
ng-bind
Нет:
ng-model
(вы не должны использовать ng-bind там, где требуется значение)Да:
ng-model
(вы не можете использовать ng-bind с<input>
тегом)Нет:
ng-bind
источник
нг-модель
Директива ng-model в AngularJS - одна из самых сильных сторон связывания переменных, используемых в приложении, с компонентами ввода. Это работает как двустороннее связывание данных. Если вы хотите лучше понять двусторонние привязки, у вас есть компонент ввода, и значение, обновленное в этом поле, должно быть отражено в другой части приложения. Лучшее решение - привязать переменную к этому полю и вывести эту переменную, где бы вы ни хотели отобразить обновленное значение через приложение.
нг-связывание
ng-bind работает значительно иначе, чем ng-модель. ng-bind - это односторонняя привязка данных, используемая для отображения значения внутри html-компонента в виде внутреннего HTML. Эта директива не может использоваться для связывания с переменной, а только с содержимым элементов HTML. Фактически это можно использовать вместе с ng-моделью для привязки компонента к элементам HTML. Эта директива очень полезна для обновления блоков, таких как div, span и т. Д., С внутренним содержимым HTML.
Этот пример поможет вам понять.
источник
источник
ngModel обычно использует для входных тегов для привязки переменную, которую мы можем изменить из контроллера и html-страницы, но ngBind используется для отображения переменной в html-странице, и мы можем изменить переменную только из контроллера, а html просто показать переменную.
источник
Мы можем использовать ng-bind с
<p>
для отображения, мы можем использовать ярлык дляng-bind {{model}}
, мы не можем использовать ng-bind с элементами управления вводом html, но мы можем использовать ярлык дляng-bind {{model}}
с элементами управления вводом html.источник