Відповіді:
ng-bind має одностороннє прив'язування даних ($ range -> view). Він має ярлик, {{ val }}
який відображає значення області, $scope.valвставленого в html, де valє ім'ям змінної.
ng-модель призначена для розміщення всередині елементів форми і має двостороннє прив'язування даних ($ range -> view and view -> $ range), наприклад <input ng-model="val"/>.
відповідь tosh гарно потрапляє до основи питання. Ось додаткова інформація ....
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 має новий масив $ валідаторів, який ви можете використовувати для перевірки замість$parsersабо$formatters.
Ця директива виконується на рівні 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 відповідає за:
Ця директива виконується на рівні 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 відповідає за:
Якщо ви вагаєтесь між використанням ng-bindабо ng-model, спробуйте відповісти на ці запитання:
Як ви тільки повинні відображення даних?
Так: ng-bind (одностороння прив'язка)
Ні: ng-model (двостороння прив'язка)
Чи потрібно прив’язувати текстовий вміст (а не значення)?
Так: ng-bind
Ні: ng-model (не слід використовувати ng-bind там, де потрібно значення)
Ваш тег - HTML
<input>?
Так: ng-model (не можна використовувати ng-bind з <input>тегом)
Ні: ng-bind
ng-модель
Директива ng-моделі в AngularJS є однією з найбільших сил для зв'язування змінних, що використовуються в застосуванні, із вхідними компонентами. Це працює як двостороння прив'язка даних. Якщо ви хочете краще зрозуміти двосторонні прив’язки, у вас є компонент введення, і значення, оновлене в цьому полі, повинно бути відображено в іншій частині програми. Кращим рішенням є прив’язання змінної до цього поля та виведення тієї змінної, де б ви не хотіли відобразити оновлене значення за допомогою програми.
ng-зв’язувати
ng-bind працює набагато інакше, ніж ng-модель. ng-bind - це один із способів прив'язки даних, що використовується для відображення значення всередині компонента html як внутрішнього HTML. Ця директива не може використовуватися для зв'язування зі змінною, а лише із вмістом елементів HTML. Infact це може використовуватися разом з 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>