Ответы:
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вы можете использовать фильтр для преобразования ваших данных. Например,
<div ng-bind="mystring | uppercase"></div>,
или проще:
<div>{{mystring | uppercase}}</div>
Обратите внимание, что uppercaseэто встроенный угловой фильтр , хотя вы также можете создать свой собственный фильтр .
Чтобы создать модуль форматирования 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
Эта директива выполняется на уровне приоритета 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 отвечает за:
Эта директива выполняется на уровне приоритета 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 отвечает за:
Если вы колеблетесь между использованием ng-bindили ng-model, попробуйте ответить на следующие вопросы:
Как вы только должны отображение данных?
Да: ng-bind (односторонняя привязка)
Нет: ng-model (двусторонняя привязка)
Вам нужно связать текстовое содержимое (а не значение)?
Да: ng-bind
Нет: ng-model (вы не должны использовать ng-bind там, где требуется значение)
Является ли ваш тег HTML
<input>?
Да: ng-model (вы не можете использовать ng-bind с <input>тегом)
Нет: ng-bind
нг-модель
Директива ng-model в AngularJS - одна из самых сильных сторон связывания переменных, используемых в приложении, с компонентами ввода. Это работает как двустороннее связывание данных. Если вы хотите лучше понять двусторонние привязки, у вас есть компонент ввода, и значение, обновленное в этом поле, должно быть отражено в другой части приложения. Лучшее решение - привязать переменную к этому полю и вывести эту переменную, где бы вы ни хотели отобразить обновленное значение через приложение.
нг-связывание
ng-bind работает значительно иначе, чем ng-модель. ng-bind - это односторонняя привязка данных, используемая для отображения значения внутри html-компонента в виде внутреннего HTML. Эта директива не может использоваться для связывания с переменной, а только с содержимым элементов HTML. Фактически это можно использовать вместе с ng-моделью для привязки компонента к элементам HTML. Эта директива очень полезна для обновления блоков, таких как div, span и т. Д., С внутренним содержимым HTML.
Этот пример поможет вам понять.
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>ngModel обычно использует для входных тегов для привязки переменную, которую мы можем изменить из контроллера и html-страницы, но ngBind используется для отображения переменной в html-странице, и мы можем изменить переменную только из контроллера, а html просто показать переменную.
Мы можем использовать 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>