Ответ 1

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

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

Ответ 2

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

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

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

фильтр (ng-bind)

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

<div ng-bind="mystring | uppercase"></div>,

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

<div>{{mystring | uppercase}}</div>

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

formatter (ng-model)

Чтобы создать форматировщик ng-model, вы создаете директиву, которая делает 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();
      });
    }
  }
}

Воспроизведение с помощью live plunker примеров ng-model formatter/parser

Что еще?

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

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

Angular 1.3 также имеет поддержку getter/setter для ngModel

Ответ 3

ngModel

Эта директива выполняется на уровне приоритета 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

<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 или выберите требуемый.
• Предоставление поведения проверки (т.е. требуемого, числа, электронной почты, URL-адреса).
• Сохранение состояния элемента управления (действительный/недействительный, грязный/нетронутый, затронутые/нетронутые, ошибки проверки).
• Установка связанных классов css для элемента (ng-valid, ng-invalid, ng-dirty, ng-pristine, ng-touch, ng-нетронутый), включая анимации.
• Регистрация элемента управления с его родительской формой.

ngBind

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

Пример Plunker

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 на значение данного выражения.

Ответ 4

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

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

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

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

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

• Да: ng-bind

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

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

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

• Нет: ng-bind

Ответ 5

ng-model

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

ng-bind

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

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

Ответ 6

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>

Ответ 7

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

Ответ 8

Мы можем использовать 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>