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

J’apprends actuellement AngularJS et j’ai de la difficulté à comprendre la différence entre ng-bind et ng-model .

Quelqu’un peut-il me dire comment ils diffèrent et quand on devrait les utiliser sur l’autre?

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

ng-model est destiné à être placé à l’intérieur d’éléments de formulaire et possède une liaison de données bidirectionnelle ($ scope -> view et view -> $ scope), par exemple .

La réponse de tosh va au coeur 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. Pour cela, ng-bind utilise des filtres , tandis que ng-model utilise des formateurs .

filtre (ng-bind)

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

,

ou plus simplement:

{{myssortingng | uppercase}}

Notez que la uppercase est un filtre angular intégré , même si vous pouvez également créer votre propre filtre .

formateur (ng-model)

Pour créer un formateur ng-model, vous créez une directive qui require: 'ngModel' , ce qui permet à cette directive d’accéder au controller 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:

  

Ceci est essentiellement l’équivalent de ng-model de ce que fait le filtre uppercase dans l’exemple ng-bind ci ng-bind dessus.


Parsers

Maintenant, que faire si vous prévoyez de permettre à l’utilisateur de modifier la valeur de myssortingng ? ng-bind uniquement une liaison unidirectionnelle, depuis le modèle -> vue . Cependant, ng-model peut se lier à la vue -> modèle, ce qui signifie que vous pouvez autoriser l’utilisateur à modifier les données du modèle, et à l’aide d’un parsingur, vous pouvez formater les données de l’utilisateur de manière rationnelle. 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 plongeur en direct des exemples de formateur / parsingur ng-model


Quoi d’autre?

ng-model également une validation intégrée. Modifiez simplement votre fonction $parsers ou $formatters pour appeler le controller.$setValidity(validationErrorKey, isValid) function .

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

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

ngModèle

La directive ngModel lie une entrée, select, textarea (ou contrôle de formulaire personnalisé) à une propriété de la scope.

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

 

Update input to see transitions when valid/invalid. Integer is a valid value.

ngModel est responsable de:

  • Relier la vue au modèle, ce que d’autres directives telles que input, textarea ou select requièrent.
  • Fournir un comportement de validation (c.-à-d. Requis, nombre, email, 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-sale, ng-vierge, ng-touché, ng-intact), y compris les animations.
  • Enregistrer le contrôle avec son formulaire parent.

ngBind

L’atsortingbut 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 du texte 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

 

Hello !

ngBind est responsable de:

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

Si vous hésitez entre utiliser ng-bind ou ng-model , essayez de répondre aux questions suivantes:


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

  • Oui: ng-bind (liaison unidirectionnelle)

  • Non: ng-model (reliure bidirectionnelle)

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

  • Oui: ng-bind

  • Non: ng-model (vous ne devez pas utiliser ng-bind où la valeur est requirejse)

Votre tag est-il un HTML ?

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

  • Non: ng-bind

ng-model

La directive ng-model dans AngularJS est l’une des plus grandes forces pour lier les variables utilisées dans les applications avec des composants d’entrée. Cela fonctionne comme une liaison de données bidirectionnelle. Si vous voulez 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 est de lier une variable à ce champ et d’envoyer la variable où vous souhaitez afficher la valeur mise à jour dans l’ensemble de l’application.

ng-bind

ng-bind fonctionne beaucoup plus que 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 code 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 un contenu HTML interne.

Cet exemple vous aiderait à comprendre.

 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 sortinged to use bind, but it is not working because it is one way binding."; }); 
 div input{ width:600px; } 
   Diff b/w model and bind  
Model-Data :

{{testingModel}}

ngModel utilise généralement pour les balises input 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 juste depuis le contrôleur et html juste montrer la variable.

Nous pouvons utiliser ng-bind avec

pour afficher, nous pouvons utiliser le raccourci pour ng-bind {{model}} , nous ne pouvons pas utiliser ng-bind avec les contrôles d’entrée HTML, mais nous pouvons utiliser le raccourci pour ng-bind {{model}} avec les contrôles d’entrée HTML.

   Hello {{name}}