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 comment ils diffèrent et quand l'un doit être utilisé par rapport à l'autre?
angularjs
angular-ngmodel
ng-bind
doublures
la source
la source
La réponse de tosh va bien au cœur de la question. Voici quelques informations supplémentaires ....
Filtres et formateurs
ng-bind
et lesng-model
deux ont le concept de transformer les données avant de les transmettre à l'utilisateur. À cette fin,ng-bind
utilise des filtres , tout enng-model
utilisant 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
uppercase
s'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 ngModelcontroller
. Par exemple:Puis dans votre partiel:
C'est essentiellement l'
ng-model
équivalent de ce que fait leuppercase
filtre dans l'ng-bind
exemple ci-dessus.Analyseurs
Maintenant, que se passe-t-il si vous prévoyez d'autoriser l'utilisateur à modifier la valeur de
mystring
?ng-bind
n'a qu'une liaison à sens unique, du modèle -> vue . Cependant,ng-model
peut 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:Jouez avec un plongeur en direct des exemples de
ng-model
formateur / analyseurQuoi d'autre?
ng-model
a également une validation intégrée. Il suffit de modifier votre$parsers
ou$formatters
fonction à appeler ngModel decontroller.$setValidity(validationErrorKey, isValid)
fonction .Angular 1.3 a un nouveau tableau $ validators que vous pouvez utiliser pour la validation au lieu de
$parsers
ou$formatters
.Angular 1.3 a également un support getter / setter pour ngModel
la source
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
CSS
HTML
ngModel est responsable de:
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
HTML
ngBind est responsable de:
la source
Si vous hésitez entre utiliser
ng-bind
oung-model
, essayez de répondre à ces questions:Oui:
ng-bind
(liaison unidirectionnelle)Non:
ng-model
(liaison bidirectionnelle)Oui:
ng-bind
Non:
ng-model
(vous ne devez pas utiliser ng-bind lorsque la valeur est requise)Oui:
ng-model
(vous ne pouvez pas utiliser ng-bind avec une<input>
balise)Non:
ng-bind
la source
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.
la source
la source
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.
la source
Nous pouvons utiliser ng-bind avec
<p>
pour afficher, nous pouvons utiliser un raccourci pourng-bind {{model}}
, nous ne pouvons pas utiliser ng-bind avec des contrôles d'entrée html, mais nous pouvons utiliser un raccourci pourng-bind {{model}}
avec des contrôles d'entrée html.la source