Was ist der Unterschied zwischen ng-model und ng-bind

Question

Ich bin gerade dabei, AngularJS zu lernen und habe Schwierigkeiten, den Unterschied zwischen ng-bind und ng-model .

Kann mir jemand sagen, wie sie sich unterscheiden und wann das eine dem anderen vorgezogen werden sollte?

Answer 1

ng-bind hat eine einseitige Datenbindung ($scope --> view). Es hat eine Abkürzung {{ val }} die den Wert des Bereichs anzeigt $scope.val eingefügt in html wo val ist ein Variablenname.

ng-model soll innerhalb von Formularelementen platziert werden und hat eine zweiseitige Datenbindung ($scope --> view und view --> $scope), z.B. <input ng-model="val"/> .

Answer 2

tosh Die Antwort der Kommission trifft den Kern der Frage sehr gut. Hier sind einige zusätzliche Informationen....

Filter und Formatierer

ng-bind und ng-model beide haben das Konzept, Daten vor der Ausgabe für den Benutzer umzuwandeln. Zu diesem Zweck, ng-bind verwendet filtert , während ng-model verwendet Formatierer .

Filter (ng-bind)

Mit ng-bind können Sie eine Filter um Ihre Daten zu transformieren. Zum Beispiel,

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

oder einfacher ausgedrückt:

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

Beachten Sie, dass uppercase ist ein eingebauter Winkelfilter Sie können aber auch Bauen Sie Ihren eigenen Filter .

Formatierer (ng-model)

Um einen ng-model formatter zu erstellen, erstellen Sie eine Direktive, die Folgendes tut require: 'ngModel' die es dieser Richtlinie ermöglicht, Zugriff auf die ngModel 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 ist im Wesentlichen die ng-model Äquivalent zu dem, was die uppercase Filter macht in der ng-bind Beispiel oben.

---

Parser

Was aber, wenn Sie dem Benutzer erlauben wollen, den Wert von mystring ? ng-bind hat nur eine Bindung in eine Richtung, von Modell --> siehe . Allerdings, ng-model kann binden von siehe --> Modell was bedeutet, dass Sie dem Benutzer erlauben können, die Daten des Modells zu ändern, und mit einer Parser können Sie die Daten des Benutzers auf rationelle Weise 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-model Beispiele für Formatierer/Parser

---

Was sonst noch?

ng-model hat auch eine integrierte Validierung. Ändern Sie einfach Ihre $parsers oder $formatters aufzurufende Funktion ngModel 's controller.$setValidity(validationErrorKey, isValid) Funktion .

Angular 1.3 hat ein neues $validators-Array die Sie für die Validierung anstelle von $parsers oder $formatters .

Angular 1.3 hat auch Getter/Setter-Unterstützung für ngModel

Answer 3

ngModel

Die ngModel-Direktive bindet ein input-, select-, textarea- (oder benutzerdefiniertes Formular-Steuerelement) an eine Eigenschaft des Bereichs.

Diese Richtlinie wird mit der 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:

• Die Einbindung der Ansicht in das Modell, die andere Direktiven wie input, textarea oder select erfordern.
• Bereitstellung eines Validierungsverhaltens (d.h. erforderlich, Nummer, E-Mail, URL).
• Beibehaltung des Zustands der Kontrolle (gültig/ungültig, verschmutzt/unversehrt, berührt/unberührt, Validierungsfehler).
• Einstellen der entsprechenden CSS-Klassen für das Element (ng-valid, ng-invalid, ng-dirty, ng-pristine, ng-touched, ng-untouched) einschließlich Animationen.
• Registrierung des Steuerelements bei 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 Richtlinie wird mit der 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 angegebenen Ausdrucks.

Answer 4

Wenn Sie zögern zwischen der Verwendung von ng-bind oder ng-model versuchen Sie, diese Fragen zu beantworten:

---

Haben Sie nur müssen Anzeige Daten?

• Ja: ng-bind (einseitige Bindung)

• Nein: ng-model (zweiseitige Bindung)

Benötigen Sie Textinhalt binden (und nicht Wert)?

• 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 verwenden mit <input> Tag)

• Nein: ng-bind

Answer 5

ng-model

Die ng-model-Direktive in AngularJS ist eine der größten Stärken, um die in der Anwendung verwendeten Variablen mit Eingabekomponenten zu verbinden. Dies funktioniert als Zwei-Wege-Datenbindung. Wenn Sie die Zwei-Wege-Bindung besser verstehen wollen, haben Sie eine Eingabekomponente und der Wert, der in diesem Feld aktualisiert wird, muss in einem anderen Teil der Anwendung reflektiert werden. Die bessere Lösung ist, eine Variable an dieses Feld zu binden und diese Variable dort auszugeben, wo Sie den aktualisierten Wert in der Anwendung anzeigen möchten.

ng-bind

ng-bind funktioniert ganz anders als ng-model. ng-bind ist eine Einweg-Datenbindung, die für die Anzeige des Wertes innerhalb der HTML-Komponente als inneres HTML verwendet wird. Diese Direktive kann nicht für die Bindung mit der Variable verwendet werden, sondern nur mit dem Inhalt des HTML-Elements. In der Tat kann sie zusammen mit ng-model verwendet werden, um die Komponente an HTML-Elemente zu binden. Diese Direktive ist sehr nützlich für die Aktualisierung von Blöcken wie div, span, etc. mit innerem HTML-Inhalt.

Dieses Beispiel würde Ihnen helfen zu verstehen.