ng-bind имеет одностороннюю привязку данных ($ scope -> view). Он имеет ярлык {{ val }} который отображает значение области $scope.val вставленное в html, где val – это имя переменной.

ng-model предназначена для размещения внутри элементов формы и имеет двустороннюю привязку данных ($ scope -> view и view -> $ scope), например .

Ответ Тоша вникает в суть вопроса. Вот еще дополнительная информация ….

Фильтры и форматирование

ng-bind и ng-model имеют концепцию преобразования данных перед выдачей ее пользователю. С этой целью ng-bind использует фильтры , а ng-model использует formatters .

фильтр (ng-bind)

С помощью ng-bind вы можете использовать фильтр для преобразования ваших данных. Например,

,

или более просто:

Обратите внимание: uppercase представляет собой встроенный угловой фильтр , хотя вы также можете создать собственный фильтр .

formatter (ng-model)

Чтобы создать форматировщик ng-model, вы создаете директиву, которая require: 'ngModel' , которая позволяет этой директиве получить доступ к controller ngModel. Например:

 app.directive('myModelFormatter', function() { return { require: 'ngModel', link: function(scope, element, attrs, controller) { controller.$formatters.push(function(value) { return value.toUpperCase(); }); } } } 

Затем в частичном:

Это, по сути, эквивалент ng-model того, что делает uppercase фильтр в примере ng-bind выше.

Парсеры

Теперь, что, если вы планируете разрешить пользователю изменять значение mystring ? ng-bind имеет только один способ привязки, от модели -> вид . Тем не менее, ng-model может привязываться к ng-model view ->, что означает, что вы можете позволить пользователю изменять данные модели, и используя синтаксический анализатор, вы можете форматировать данные пользователя оптимизированным образом. Вот что это выглядит:

 app.directive('myModelFormatter', function() { return { require: 'ngModel', link: function(scope, element, attrs, controller) { controller.$parsers.push(function(value) { return value.toLowerCase(); }); } } } 

Играйте с живым плунжером образцов форматов / парсеров ng-model

Что еще?

ng-model также имеет встроенную проверку. Просто измените функцию controller.$setValidity(validationErrorKey, isValid) или $formatters formatters, чтобы вызвать controller.$setValidity(validationErrorKey, isValid) .

У Angular 1.3 есть новый массив $ validators, который вы можете использовать для проверки вместо $parsers или $formatters .

Угловой 1.3 также поддерживает геттер / сеттер для ngModel

ngModel

Директива ngModel связывает вход, select, textarea (или пользовательский контроль формы) с свойством в области.

Эта директива выполняется на уровне приоритета 1.

Пример Plunker

JAVASCRIPT

 angular.module('inputExample', []) .controller('ExampleController', ['$scope', function($scope) { $scope.val = '1'; }]); 

CSS

 .my-input { -webkit-transition:all linear 0.5s; transition:all linear 0.5s; background: transparent; } .my-input.ng-invalid { color:white; background: red; } 

HTML

 
 Update input to see transitions when valid/invalid. Integer is a valid value. 
 
   

ngModel отвечает за:

• Связывание представления с моделью, которую требуют другие директивы, такие как input, textarea или select.
• Предоставление поведения проверки (т. Е. Требуемого, числа, электронной почты, URL-адреса).
• Сохранение состояния управления (действительный / недействительный, грязный / нетронутый, коснувшийся / нетронутый, ошибки проверки).
• Установка связанных classов css для элемента (ng-valid, ng-invalid, ng-dirty, ng-pristine, ng-touched, ng-нетронутый), включая анимацию.
• Регистрация элемента управления с его родительской формой.

ngBind

Атрибут ngBind сообщает Angular заменять текстовое содержимое указанного элемента HTML значением данного выражения и обновлять текстовый контент при изменении значения этого выражения.

Эта директива выполняется на уровне приоритета 0.

Пример Plunker

JAVASCRIPT

 angular.module('bindExample', []) .controller('ExampleController', ['$scope', function($scope) { $scope.name = 'Whirled'; }]); 

HTML

 
 Enter name: 
 Hello !  

ngBind отвечает за:

• Замена текстового содержимого указанного элемента HTML значением данного выражения.

Если вы не согласны с использованием ng-bind или ng-model , попробуйте ответить на следующие вопросы:

Вам нужно только отображать данные?

• Да: ng-bind (односторонняя привязка)

• Нет: ng-model (двусторонняя привязка)

Вам нужно связать текстовый контент (а не значение)?

• Да: ng-bind

• Нет: ng-model (вы не должны использовать ng-bind, где требуется значение)

Является ли ваш тег HTML ?

• Да: ng-model (вы не можете использовать ng-bind с входным тегом)

• Нет: ng-bind

нг-модель

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

нг-связывание

ng-bind работает намного иначе, чем ng-model. ng-bind – это одностороннее связывание данных, используемое для отображения значения внутри html-компонента как внутреннего HTML. Эта директива не может использоваться для привязки к переменной, но только с содержимым элементов HTML. Infact это может использоваться вместе с ng-model для привязки компонента к элементам HTML. Эта директива очень полезна для обновления блоков, таких как div, span и т. Д. С внутренним содержимым HTML.

Этот пример поможет вам понять.

ngModel обычно использует для входных тегов для привязки переменную, которую мы можем изменить переменную с controllerа и html-страницы, но ngBind использовать для отображения переменной на html-странице, и мы можем изменять переменную только из controllerа и html, просто отображая переменную.

Мы можем использовать ng-bind с

для отображения, мы можем использовать ярлык для ng-bind {{model}} , мы не можем использовать ng-bind с элементами управления html, но мы можем использовать ярлык для ng-bind {{model}} с элементами управления html.

   Hello {{name}}