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

Question

Je suis actuellement en apprentissage angularjs et éprouve des difficultés à comprendre la différence entre ng-bind et ng-model.

Quelqu'un peut-il me dire comment ils diffèrent et où l'on doit être utilisé plutôt que l'autre?

Answer 1

ng-bind a un moyen de liaison de données ($champ d'application --> affichage). Il dispose d'un raccourci {{ val }} qui affiche l'étendue valeur $scope.val insérées dans le code html.

ng-modèle est destiné à être mis à l'intérieur de la forme des éléments et des a les deux sens de la liaison de données ($champ d'application --> affichage et afficher --> $champ) par exemple, <input ng-model="val"/>.

Answer 2

tosh's réponse est au cœur de la question gentiment. Voici quelques informations supplémentaires....

Des Filtres Et Des Formateurs

ng-bind et ng-model ont à la fois la notion de transformer les données avant de le reproduire pour l'utilisateur. À cette fin, ng-bind utilise des filtres, tout en ng-model utilise 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 que uppercase est intégré dans le filtre angulaire, bien que vous pouvez également construire votre propre filtre.

formateur (ng-model)

Pour créer une ng-model formateur, vous créez une directive qui n' require: 'ngModel', ce qui permet à cette directive pour accéder à ngModel de l' 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 partielles:

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

C'est essentiellement l' ng-model équivalent de ce que l' uppercase filtre est en train de faire dans l' ng-bind exemple ci-dessus.

---

Les analyseurs

Maintenant, si vous prévoyez de permettre à l'utilisateur de modifier la valeur de mystring? ng-bind a qu'une seule façon de liaison, de modèle-->afficher. Toutefois, ng-model peut se lier de vue-->modèle de ce qui signifie que vous pouvez permettre à l'utilisateur de modifier les données du modèle, et à l'aide d'un analyseur , vous pouvez mettre en forme les données de l'utilisateur dans un processus simplifié. 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();
      });
    }
  }
}

---

Jouer avec un live plunker de l' ng-model formateur/parser exemples

---

Quoi D'Autre?

ng-model a également intégré dans le processus de validation. Il suffit de modifier votre $parsers ou $formatters la fonction à appeler ngModel' controller.$setValidity(validationErrorKey, isValid) fonction.

Angulaire 1.3 a une nouvelle $validators tableau que vous pouvez utiliser pour validation au lieu de $parsers ou $formatters.

Angulaire 1.3 a aussi des getter/setter de soutien pour ngModel

Answer 3

ng-model est une liaison bidirectionnelle objet de contrôler et de contrôle de l'objet. ng-bind est un moyen de liaison modèle de contrôle.

https://docs.angularjs.org/api/ng/directive/ngBind

https://docs.angularjs.org/api/ng/directive/ngModel

Answer 4

ng-model est une liaison bidirectionnelle objet de contrôler et de contrôle de l'objet.

ng-bind est un moyen de liaison modèle de contrôle.

• https://docs.angularjs.org/api/ng/directive/ngBind
• https://docs.angularjs.org/api/ng/directive/ngModel