Quelle est la différence entre ng-model et ng-bind


554

J'apprends actuellement AngularJS et j'ai du mal à comprendre la différence entre ng-bindet ng-model.

Quelqu'un peut-il me dire comment ils diffèrent et quand l'un doit être utilisé par rapport à l'autre?

Réponses:


831

ng-bind a une liaison de données unidirectionnelle ($ scope -> view). Il a un raccourci {{ val }} qui affiche la valeur de portée $scope.valinsérée dans html où valest un nom de variable.

ng-model est destiné à être placé à l'intérieur des éléments du formulaire et possède une liaison de données bidirectionnelle ($ scope -> view et view -> $ scope), par exemple <input ng-model="val"/>.


80
Merci tosh. Serait-ce une hypothèse juste de dire que ng-bind n'est requis que lorsque la valeur à afficher ne nécessite pas de saisie par l'utilisateur. Et, ng-modal serait utilisé pour les valeurs (<input>) qui le font. La documentation angulaire semble le suggérer, mais je recherche une meilleure compréhension.
dubs

24
@Marc En fait, ng-bind lie le contenu textuel de l'élément, pas sa valeur. Pour cette raison, il ne peut pas être utilisé dans les éléments <input>.
trogdor

21
@Marc, dans ce cas, utilisez simplement: <input type = "text" value = "{{prop}}" />
John Kurlak

3
@JakubBarczyk {{:: va}} est une liaison unique et non à sens unique.
Vlad Bezden

2
@Wachburn C'est à sens unique mais plus important c'est à usage unique. Il arrête de regarder les changements de modèle après que le modèle ait pris une valeur. Il ne peut donc pas être utilisé comme liaison unidirectionnelle si nous avons besoin d'une liaison unidirectionnelle régulière.
Ruslan Stelmachenko

141

La réponse de tosh va bien au cœur de la question. Voici quelques informations supplémentaires ....

Filtres et formateurs

ng-bindet les ng-modeldeux ont le concept de transformer les données avant de les transmettre à l'utilisateur. À cette fin, ng-bindutilise des filtres , tout en ng-modelutilisant des formateurs .

filtre (ng-bind)

Avec ng-bind, vous pouvez utiliser un filtre pour transformer vos données. Par exemple,

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

ou plus simplement:

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

Notez qu'il uppercases'agit d'un filtre angulaire intégré , bien que vous puissiez également créer votre propre filtre .

formateur (modèle ng)

Pour créer un formateur ng-model, vous créez une directive qui le fait require: 'ngModel', ce qui permet à cette directive d'accéder aux ngModel controller. Par exemple:

app.directive('myModelFormatter', function() {
  return {
    require: 'ngModel',
    link: function(scope, element, attrs, controller) {
     controller.$formatters.push(function(value) {
        return value.toUpperCase();
      });
    }
  }
}

Puis dans votre partiel:

<input ngModel="mystring" my-model-formatter />

C'est essentiellement l' ng-modeléquivalent de ce que fait le uppercase filtre dans l' ng-bindexemple ci-dessus.


Analyseurs

Maintenant, que se passe-t-il si vous prévoyez d'autoriser l'utilisateur à modifier la valeur de mystring? ng-bindn'a qu'une liaison à sens unique, du modèle -> vue . Cependant, ng-modelpeut se lier à partir de la vue -> modèle, ce qui signifie que vous pouvez autoriser l'utilisateur à modifier les données du modèle, et en utilisant un analyseur, vous pouvez formater les données de l'utilisateur de manière rationalisée. Voici à quoi cela ressemble:

app.directive('myModelFormatter', function() {
  return {
    require: 'ngModel',
    link: function(scope, element, attrs, controller) {
     controller.$parsers.push(function(value) {
        return value.toLowerCase();
      });
    }
  }
}

Jouez avec un plongeur en direct des exemples de ng-modelformateur / analyseur


Quoi d'autre?

ng-modela également une validation intégrée. Il suffit de modifier votre $parsersou $formattersfonction à appeler ngModel de controller.$setValidity(validationErrorKey, isValid)fonction .

Angular 1.3 a un nouveau tableau $ validators que vous pouvez utiliser pour la validation au lieu de$parsersou$formatters.

Angular 1.3 a également un support getter / setter pour ngModel


7
+ 1. Merci pour l'info supplémentaire. C'est toujours bon / super d'avoir une réponse rapide (Tosh's) puis une réponse détaillée POURQUOI & COMMENT comme la vôtre pour en savoir / comprendre davantage dans les cas de raisonnement / d'utilisation.
redfox05

30

ngModel

La directive ngModel lie une entrée, une sélection, une zone de texte (ou un contrôle de formulaire personnalisé) à une propriété de la portée.

Cette directive s'exécute au niveau de priorité 1.

Exemple 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 est responsable de:

  • Liaison de la vue dans le modèle, dont d'autres directives telles que l'entrée, la zone de texte ou la sélection nécessitent.
  • Fournir un comportement de validation (c'est-à-dire obligatoire, numéro, e-mail, URL).
  • Garder l'état du contrôle (valide / invalide, sale / vierge, touché / intact, erreurs de validation).
  • Définition de classes CSS associées sur l'élément (ng-valide, ng-invalide, ng-dirty, ng-vierges, ng-touched, ng-untouched), y compris des animations.
  • Enregistrement du contrôle avec son formulaire parent.

ngBind

L'attribut ngBind indique à Angular de remplacer le contenu textuel de l'élément HTML spécifié par la valeur d'une expression donnée et de mettre à jour le contenu textuel lorsque la valeur de cette expression change.

Cette directive s'exécute au niveau de priorité 0.

Exemple 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 est responsable de:

  • Remplacement du contenu textuel de l'élément HTML spécifié par la valeur d'une expression donnée.

Bien que j'apprécie cette réponse approfondie, ma réponse précédemment sélectionnée restera car elle a fourni juste assez d'informations pour comprendre la différence.
dubs

8

Si vous hésitez entre utiliser ng-bindou ng-model, essayez de répondre à ces questions:


Avez-vous seulement besoin d' afficher des données?

  • Oui: ng-bind (liaison unidirectionnelle)

  • Non: ng-model (liaison bidirectionnelle)

Avez-vous besoin de lier du contenu texte (et non une valeur)?

  • Oui: ng-bind

  • Non: ng-model (vous ne devez pas utiliser ng-bind lorsque la valeur est requise)

Votre balise est-elle un HTML <input>?

  • Oui: ng-model (vous ne pouvez pas utiliser ng-bind avec une <input>balise)

  • Non: ng-bind


6

ng-model

La directive ng-model dans AngularJS est l'une des plus grandes forces pour lier les variables utilisées dans l'application avec des composants d'entrée. Cela fonctionne comme une liaison de données bidirectionnelle. Si vous souhaitez mieux comprendre les liaisons bidirectionnelles, vous disposez d'un composant d'entrée et la valeur mise à jour dans ce champ doit être reflétée dans une autre partie de l'application. La meilleure solution consiste à lier une variable à ce champ et à sortir cette variable là où vous souhaitez afficher la valeur mise à jour via l'application.

ng-bind

ng-bind fonctionne très différemment de ng-model. ng-bind est une liaison de données à sens unique utilisée pour afficher la valeur à l'intérieur du composant html en HTML interne. Cette directive ne peut pas être utilisée pour la liaison avec la variable mais uniquement avec le contenu des éléments HTML. En fait, cela peut être utilisé avec ng-model pour lier le composant aux éléments HTML. Cette directive est très utile pour mettre à jour les blocs comme div, span, etc. avec du contenu HTML interne.

Cet exemple vous aiderait à comprendre.


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>


2

ngModel utilise généralement pour les balises d'entrée pour lier une variable que nous pouvons changer de variable depuis le contrôleur et la page html mais ngBind utilise pour afficher une variable dans la page html et nous pouvons changer la variable uniquement depuis le contrôleur et html afficher simplement la variable.


1

Nous pouvons utiliser ng-bind avec <p>pour afficher, nous pouvons utiliser un raccourci pour ng-bind {{model}}, nous ne pouvons pas utiliser ng-bind avec des contrôles d'entrée html, mais nous pouvons utiliser un raccourci pour ng-bind {{model}}avec des contrôles d'entrée 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>
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.