Ich lerne gerade AngularJS und habe Schwierigkeiten, den Unterschied zwischen ng-bindund zu verstehen ng-model.

Kann mir jemand sagen, wie sie sich unterscheiden und wann eines über das andere verwendet werden sollte?

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 ....

Filter & Formatierer

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 .

Filter (ng-bind)

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 .

Formatierer (ng-Modell)

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 .

---

Parser

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

---

Was sonst?

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

ngModel

Die ngModel-Direktive bindet einen Eingabe-, Auswahl-, Textbereich (oder ein benutzerdefiniertes Formularsteuerelement) an eine Eigenschaft im Bereich.

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:

• Einbinden der Ansicht in das Modell, das andere Anweisungen wie Eingabe, Textbereich oder Auswahl erfordern.
• Bereitstellung des Validierungsverhaltens (dh erforderlich, Nummer, E-Mail, URL).
• Beibehaltung des Kontrollstatus (gültig / ungültig, schmutzig / makellos, berührt / unberührt, Validierungsfehler).
• Festlegen verwandter CSS-Klassen für das Element (ng-gültig, ng-ungültig, ng-schmutzig, ng-makellos, ng-berührt, ng-unberührt) einschließlich Animationen.
• Registrieren des Steuerelements mit seinem übergeordneten Formular.

ngBind

Das ngBind-Attribut weist Angular an, den Textinhalt des angegebenen HTML-Elements durch den Wert eines bestimmten Ausdrucks zu ersetzen und den Textinhalt zu aktualisieren, wenn sich der Wert dieses Ausdrucks ändert.

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:

• Ersetzen des Textinhalts des angegebenen HTML-Elements durch den Wert eines bestimmten Ausdrucks.

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.

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>