Antworten:
ng-bind verfügt über eine Einweg-Datenbindung ($ scope -> view). Es gibt eine Verknüpfung, {{ val }}
die den $scope.valin HTML eingefügten Bereichswert anzeigt, wobei vales sich um einen Variablennamen handelt.
ng-model soll in Formularelemente eingefügt werden und verfügt über eine bidirektionale Datenbindung ($ scope -> view und view -> $ scope), z <input ng-model="val"/>.
Die Antwort von tosh bringt die Frage auf den Punkt . Hier einige zusätzliche Informationen ....
ng-bindund ng-modelbeide haben das Konzept, Daten zu transformieren, bevor sie für den Benutzer ausgegeben werden. Zu diesem Zweck ng-bindverwendet Filter , während ng-modelAnwendungen Formatierer .
Mit ng-bindkönnen Sie einen Filter verwenden, um Ihre Daten zu transformieren. Zum Beispiel,
<div ng-bind="mystring | uppercase"></div>,
oder einfacher:
<div>{{mystring | uppercase}}</div>
Beachten Sie, dass dies uppercaseein integrierter Winkelfilter ist. Sie können jedoch auch einen eigenen Filter erstellen .
Um einen ng-Modellformatierer zu erstellen, erstellen Sie eine entsprechende Direktive, require: 'ngModel'mit der diese Direktive auf ngModels zugreifen kann controller. Zum Beispiel:
app.directive('myModelFormatter', function() {
return {
require: 'ngModel',
link: function(scope, element, attrs, controller) {
controller.$formatters.push(function(value) {
return value.toUpperCase();
});
}
}
}Dann in Ihrem Teil:
<input ngModel="mystring" my-model-formatter />Dies entspricht im Wesentlichen dem, ng-modelwas der uppercase Filter im ng-bindobigen Beispiel tut .
Was ist nun, wenn Sie dem Benutzer erlauben möchten, den Wert von zu ändern mystring? ng-bindhat nur eine Einwegbindung aus Modell -> Sicht . Jedoch ng-modelbinden kann aus Sicht -> Modell was bedeutet , dass Sie dem Benutzer ermöglichen , kann das Modell der Daten zu ändern, und mit Hilfe eines Parsers Sie die Daten in einer Weise rationalisiert des Benutzers formatieren. So sieht das aus:
app.directive('myModelFormatter', function() {
return {
require: 'ngModel',
link: function(scope, element, attrs, controller) {
controller.$parsers.push(function(value) {
return value.toLowerCase();
});
}
}
}Spielen Sie mit einem Live-Plunker der ng-modelFormatierer / Parser-Beispiele
ng-modelhat auch eine integrierte Validierung. Einfach ändern Sie Ihre $parsersoder $formattersFunktion aufzurufen ngModel ‚s - controller.$setValidity(validationErrorKey, isValid)Funktion .
Angular 1.3 verfügt über ein neues $ validators-Array, das Sie anstelle von$parsersoderzur Validierung verwenden können$formatters.
Angular 1.3 bietet auch Getter / Setter-Unterstützung für ngModel
Diese Anweisung wird auf Prioritätsstufe 1 ausgeführt.
Beispiel 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 ist verantwortlich für:
Diese Anweisung wird auf Prioritätsstufe 0 ausgeführt.
Beispiel 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 ist verantwortlich für:
Wenn Sie zwischen ng-bindoder zögern ng-model, versuchen Sie, die folgenden Fragen zu beantworten:
Haben Sie nur brauchen Anzeigedaten?
Ja: ng-bind (Einwegbindung)
Nein: ng-model (bidirektionale Bindung)
Müssen Sie Textinhalte (und keinen Wert) binden ?
Ja: ng-bind
Nein: ng-model (Sie sollten ng-bind nicht verwenden, wenn ein Wert erforderlich ist.)
Ist Ihr Tag ein HTML
<input>?
Ja: ng-model (Sie können ng-bind nicht mit <input>Tag verwenden.)
Nein: ng-bind
ng-Modell
Die ng-Modell-Direktive in AngularJS ist eine der größten Stärken, um die in der Anwendung verwendeten Variablen mit Eingabekomponenten zu verbinden. Dies funktioniert als bidirektionale Datenbindung. Wenn Sie die bidirektionalen Bindungen besser verstehen möchten, verfügen Sie über eine Eingabekomponente, und der in diesem Feld aktualisierte Wert muss in einem anderen Teil der Anwendung wiedergegeben werden. Die bessere Lösung besteht darin, eine Variable an dieses Feld zu binden und diese Variable dort auszugeben, wo Sie den aktualisierten Wert über die Anwendung anzeigen möchten.
ng-bind
ng-bind funktioniert ganz anders als ng-model. ng-bind ist eine Einweg-Datenbindung, mit der der Wert in der HTML-Komponente als inneres HTML angezeigt wird. Diese Anweisung kann nicht zum Binden mit der Variablen verwendet werden, sondern nur mit dem Inhalt der HTML-Elemente. Tatsächlich kann dies zusammen mit ng-model verwendet werden, um die Komponente an HTML-Elemente zu binden. Diese Anweisung ist sehr nützlich, um die Blöcke wie div, span usw. mit innerem HTML-Inhalt zu aktualisieren.
Dieses Beispiel würde Ihnen helfen, zu verstehen.
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 wird normalerweise für Eingabe-Tags zum Binden einer Variablen verwendet, die wir von Controller und HTML-Seite ändern können, aber ngBind wird zum Anzeigen einer Variablen auf HTML-Seite verwendet, und wir können Variablen nur von Controller ändern, und HTML zeigt nur Variable an.
Wir können ng-bind with <p>zum Anzeigen verwenden, wir können Verknüpfungen für verwenden ng-bind {{model}}, wir können ng-bind nicht für HTML-Eingabesteuerelemente verwenden, aber wir können Verknüpfungen für ng-bind {{model}}HTML-Eingabesteuerelemente verwenden.
<input type="text" ng-model="name" placeholder="Enter Something"/>
<input type="text" value="{{name}}" placeholder="Enter Something"/>
Hello {{name}}
<p ng-bind="name"</p>