Question 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 l'un devrait être utilisé sur l'autre?


530
2017-09-14 07:02


origine


Réponses:


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

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


802
2017-09-14 07:44



toshLa réponse va bien au coeur de la question. Voici quelques informations supplémentaires ....

Filtres et formateurs

ng-bind et ng-model les deux ont le concept de transformer les données avant de les sortir pour l'utilisateur. À cette fin, ng-bind les usages filtres, tandis que ng-model les usages 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 que uppercase est un filtre angulaire intégré, bien que tu puisses aussi Construisez votre propre filtre.

formateur (ng-modèle)

Pour créer un formateur ng-model, vous créez une directive qui require: 'ngModel', ce qui permet à cette directive d'accéder à 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 le ng-model équivalent de ce que le uppercase  filtre fait dans le ng-bind exemple ci-dessus.


Parsers

Maintenant, que faire si vous prévoyez de permettre à l'utilisateur de changer la valeur de mystring? ng-bind a seulement une liaison à sens unique, de modèle->vue. cependant, ng-model peut lier à partir de vue->modèle ce qui signifie que vous pouvez autoriser l'utilisateur à modifier les données du modèle et utiliser un analyseur vous pouvez formater les données de l'utilisateur de manière simplifié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();
      });
    }
  }
}

Jouer avec un plunker en direct de la ng-model exemples de formateur / analyseur


Quoi d'autre?

ng-model a également une validation intégrée. Il suffit de modifier votre $parsers ou $formatters fonction d'appeler ngModelde controller.$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


138
2018-05-20 02:52



ngModel

La directive ngModel lie une entrée, select, textarea (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:

  • Relier la vue dans le modèle, quelles autres directives telles que input, textarea ou select require.
  • Fournir un comportement de validation (c'est-à-dire requis, numéro, email, URL).
  • Garder l'état du contrôle (valide / invalide, sale / vierge, touché / intacte, erreurs de validation).
  • Définition des classes css associées sur l'élément (ng-valide, ng-invalide, ng-dirty, ng-vierge, ng-touché, ng-intacte) y compris animations
  • Enregistrement du contrôle avec son formulaire parent.

ngBind

L'attribut ngBind dit à 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

<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 du texte de l'élément HTML spécifié par le valeur d'une expression donnée.

29
2018-04-17 12:25



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


Le faites vous seulement besoin de afficher Les données?

  • Oui: ng-bind  (liaison à sens unique)

  • Non: ng-model  (liaison bidirectionnelle)

Avez-vous besoin de lier le contenu du texte (et pas de valeur)?

  • Oui: ng-bind 

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

Est-ce que votre tag est un HTML <input>?

  • Oui: ng-model  (vous ne pouvez pas utiliser ng-bind avec une balise d'entrée)

  • Non: ng-bind


8
2017-11-16 09:22



ng-modèle 

La directive ng-model dans AngularJS est l'une des plus grandes forces pour lier les variables utilisées dans l'application avec les 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'endroit où vous souhaitez afficher la valeur mise à jour à travers 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, ceci 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.


6
2018-04-29 00:21



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
2017-12-09 15:09



ngModel utilisent généralement pour les balises d'entrée pour lier une variable que nous pouvons changer la variable du contrôleur et la page html, mais ngBind utiliser pour afficher une variable dans la page html et nous pouvons changer la variable juste du contrôleur et html juste montrer la variable.


2
2017-12-29 13:19



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 les contrôles d'entrée html, mais nous pouvons utiliser 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>

1
2018-03-07 13:27