В чем разница между ng-моделью и ng-bind

554

В настоящее время я изучаю AngularJS, и мне трудно понять разницу между ng-bind и ng-model.

Может кто-нибудь сказать мне, как они отличаются и когда один должен использоваться над другим?

Dubs
источник

Ответы:

831

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

ng-модель предназначена для размещения внутри элементов формы и имеет двустороннюю привязку данных ($ scope -> view and view -> $ scope) например <input ng-model="val"/>.

вздор
источник
80
Спасибо Тош. Было бы справедливо предположить, что ng-bind требуется только тогда, когда отображаемое значение не требует ввода данных пользователем. И, ng-модал будет использоваться для значений (<input>), которые делают. В угловой документации, похоже, это сказано, но я после лучшего понимания.
дабы
24
@Marc На самом деле ng-bind связывает текстовое содержимое элемента, а не его значение. Из-за этого его нельзя использовать в элементах <input>.
трогдор
21
@Marc, в этом случае, просто используйте: <input type = "text" value = "{{prop}}" />
Джон Курлак
3
@JakubBarczyk {{:: va}} привязывается один раз, а не один.
Влад Безден,
2
@ Wachburn Это односторонний, но более важный, это разовый. Он перестает наблюдать за изменениями модели после того, как модель принимает какое-либо значение. Поэтому его нельзя использовать в качестве односторонней привязки, если нам нужна регулярная односторонняя привязка.
Руслан Стельмаченко
141

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

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

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', что позволяет этой директиве получить доступ к ngModel controller. Например:

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

Тогда в вашем частичном:

<input ngModel="mystring" my-model-formatter />

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


Парсеры

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

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также имеет встроенную проверку. Просто измените $parsersили $formattersфункцию для вызова ngModel «s controller.$setValidity(validationErrorKey, isValid)функции .

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

Angular 1.3 также имеет поддержку получения / установки для ngModel

Гил Бирман
источник
7
+1. Спасибо за дополнительную информацию. Всегда хорошо / здорово иметь быстрый ответ (Тоша), а затем подробный ответ ПОЧЕМУ И КАК, как ваш, чтобы узнать / понять больше в рассуждениях / случаях использования.
redfox05
30

ngModel

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

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

Пример Плункер

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

<p id="inputDescription">
   Update input to see transitions when valid/invalid.
   Integer is a valid value.
</p>
<form name="testForm" ng-controller="ExampleController">
    <input ng-model="val" ng-pattern="/^\d+$/" name="anim" class="my-input"
         aria-describedby="inputDescription" />
</form>

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

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

ngBind

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

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

Пример Плункер

JAVASCRIPT

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

HTML

<div ng-controller="ExampleController">
  <label>Enter name: <input type="text" ng-model="name"></label><br>
  Hello <span ng-bind="name"></span>!
</div>

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

  • Замена текстового содержимого указанного элемента HTML значением данного выражения.
Subodh Ghulaxe
источник
Хотя я ценю этот подробный ответ, мой ранее выбранный ответ останется, поскольку он предоставил достаточно информации, чтобы понять разницу.
дабы
8

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


Как вы только должны отображение данных?

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

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

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

  • Да: ng-bind

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

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

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

  • Нет: ng-bind

Mistalis
источник
6

нг-модель

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

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

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

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

Кришна
источник
5

angular.module('testApp',[]).controller('testCTRL',function($scope)
                               
{
  
$scope.testingModel = "This is ModelData.If you change textbox data it will reflected here..because model is two way binding reflected in both.";
$scope.testingBind = "This is BindData.You can't change this beacause it is binded with html..In above textBox i tried to use bind, but it is not working because it is one way binding.";            
});
div input{
width:600px;  
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<head>Diff b/w model and bind</head>
<body data-ng-app="testApp">
    <div data-ng-controller="testCTRL">
        Model-Data : <input type="text" data-ng-model="testingModel">
        <p>{{testingModel}}</p>
          <input type="text" data-ng-bind="testingBind">
          <p ng-bind="testingBind"></p>
    </div>
</body>

Раманатану
источник
2

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

Pejman
источник
1

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

<input type="text" ng-model="name" placeholder="Enter Something"/>
<input type="text" value="{{name}}" placeholder="Enter Something"/>
  Hello {{name}}
<p ng-bind="name"</p>
Викаш Ранджан Джа
источник