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

554

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?

Dubs
quelle

Antworten:

831

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

Tosh
quelle
80
Danke tosh. Wäre es eine faire Annahme zu sagen, dass ng-bind nur erforderlich ist, wenn für den anzuzeigenden Wert keine Benutzereingabe erforderlich ist. Und ng-modal wird für Werte (<Eingabe>) verwendet, die dies tun. Die eckige Dokumentation scheint dies zu suggerieren, aber ich bin nach einem besseren Verständnis.
Dubs
24
@Marc Tatsächlich bindet ng-bind den Textinhalt des Elements, nicht seinen Wert. Aus diesem Grund kann es nicht in <input> -Elementen verwendet werden.
Trogdor
21
@Marc, in diesem Fall verwenden Sie einfach: <input type = "text" value = "{{prop}}" />
John Kurlak
3
@JakubBarczyk {{:: va}} ist einmalig bindend und nicht einseitig.
Vlad Bezden
2
@Wachburn Es ist einseitig, aber wichtiger ist es einmalig. Es hört auf, Modelländerungen zu beobachten, nachdem das Modell einen Wert angenommen hat. Es kann also nicht als Einwegbindung verwendet werden, wenn wir eine reguläre Einwegbindung benötigen.
Ruslan Stelmachenko
141

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

Gil Birman
quelle
7
+ 1. Danke für die zusätzlichen Infos. Es ist immer gut / großartig, eine schnelle Antwort (Tosh's) und dann eine detaillierte WARUM & WIE-Antwort wie Ihre zu haben, um in Argumentations- / Anwendungsfällen mehr zu lernen / zu verstehen.
Redfox05
30

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.
Subodh Ghulaxe
quelle
Obwohl ich diese gründliche Antwort sehr schätze, bleibt meine zuvor ausgewählte Antwort erhalten, da sie gerade genug Informationen enthält, um den Unterschied zu verstehen .
Dubs
8

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

Mistalis
quelle
6

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.

Krishna
quelle
5

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>

Ramanathan
quelle
2

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.

Pejman
quelle
1

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>
Vikash Ranjan Jha
quelle