web-dev-qa-db-fra.com

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

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

Quelqu'un peut-il me dire en quoi ils diffèrent et quand l'un devrait être utilisé sur l'autre?

angularjsangular-ngmodelng-bind
549
dubs

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

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

824
Tosh

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

Filtres et formateurs

ng-bind et ng-model ont tous deux le concept de transformer des données avant de les sortir pour l'utilisateur. À cette fin, ng-bind utilise des filtres , tandis que ng-model utilise des outils de formatage .

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 que uppercase est un filtre angular 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 utilisant require: 'ngModel', qui permet à cette directive d'accéder à controller de ngModel. 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 />

Il s'agit essentiellement de l'équivalent ng-model de ce que le filtre uppercase fait dans l'exemple ng-bind ci-dessus.

Parseurs

Maintenant, que se passe-t-il si vous envisagez d'autoriser l'utilisateur à modifier la valeur de mystring? ng-bind n'a qu'une liaison à sens unique, de modèle -> vue. Cependant, ng-model peut être lié à partir de vue -> modèle, ce qui signifie que vous pouvez autoriser l'utilisateur à modifier les données du modèle, à l'aide de Parseur , vous pouvez formater les données de l’utilisateur de manière simplifiée. Voici à quoi ça 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 disque virtuel du ng-model exemples de formateur/analyseur

Quoi d'autre?

ng-model a également une validation intégrée. Modifiez simplement votre fonction $parsers ou $formatters pour appeler la fonction _ de ngModelcontroller.$setValidity(validationErrorKey, isValid) .

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

Angular 1.3 prend également en charge le getter/setter pour ngModel

140
Gil Birman

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 est exécutée 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 au modèle requise par d’autres directives, telles que saisie, textarea ou select.
  • Comportement de validation (c'est-à-dire requis, numéro, email, url).
  • Conserver l'état du contrôle (valide/non valide, sale/vierge, touché/non touché, erreurs de validation).
  • Définition de classes css liées sur l'élément (ng-valide, ng-invalide, ng-sale, ng-vierge, touchées par ng, non-touchées), animations comprises.
  • 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 le mettre à jour lorsque la valeur de cette expression change. .

Cette directive est exécutée 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:

  • Remplacer le contenu textuel de l'élément HTML spécifié par la valeur d'une expression donnée.
29
Subodh Ghulaxe

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

Avez-vous seulement besoin de afficher des données ?

  • Oui: _ng-bind_ (liaison à sens unique)

  • Non: _ng-model_ (liaison bidirectionnelle)

Avez-vous besoin de lier le contenu textuel (et non la valeur)?

  • Oui: _ng-bind_

  • Non: _ng-model_ (vous ne devez pas utiliser ng-bind où la valeur est requise)

Votre balise est-elle un HTML <input>?

  • Oui: _ng-model_ (vous ne pouvez pas utiliser ng-bind avec la balise _<input>_)

  • Non: _ng-bind_

8
Mistalis

ng-model

la directive ng-model dans AngularJS est l’un des principaux atouts pour lier les variables utilisées dans l’application aux composants d’entrée. Cela fonctionne comme une liaison de données bidirectionnelle. Si vous souhaitez mieux comprendre les liaisons bidirectionnelles, vous avez 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 à générer cette variable à tout moment si vous souhaitez afficher la valeur mise à jour dans 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 dans le composant HTML en tant que 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. Enfait, cela peut être utilisé avec ng-model pour lier le composant à des éléments HTML. Cette directive est très utile pour mettre à jour les blocs tels que div, span, etc. avec du contenu HTML interne.

Cet exemple vous aiderait à comprendre.

6
Krishna
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>
5
ramanathan

ngModel généralement utilisé 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 utilisé pour afficher une variable dans une page html et nous pouvons changer de variable simplement du contrôleur et html montrent juste variable.

2
user7339584

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 html contrôles d'entrée.

<input type="text" ng-model="name" placeholder="Enter Something"/>
<input type="text" value="{{name}}" placeholder="Enter Something"/>
  Hello {{name}}
<p ng-bind="name"</p>
1
Vikash Ranjan Jha