IP Girl
  1. IP Girl
  3. Quelle est la différence entre ngModel. $ ModelValue et ngModel. $ ViewValue
Intereting Posts
Comment changer l’icône JFrame Quand puis-je d’abord mesurer une vue? L’émulateur Android ne prend pas la saisie au clavier – Outils SDK rev 20 Quelqu’un d’autre trouve-t-il le nom des classes et des méthodes parmi les parties les plus difficiles de la programmation? Bibliothèques Coroutine disponibles en Java CSS overflow-x: visible; et débordement-y: caché; provoquant un problème de barre de défilement Sqlite: CURRENT_TIMESTAMP est dans GMT, pas le fuseau horaire de la machine Existe-t-il une expiration sur les URL bit.ly ou tinyurl? Les sauts de ligne attendus doivent être «LF» mais ont trouvé le style de saut de ligne «CRLF» Une explication claire, laïque de la différence entre | et || en c #? Algorithme de Manacher (algorithme pour trouver la plus longue sous-chaîne palindrome en temps linéaire) Visual Studio 2012 Le fichier de projet “” a été renommé ou n’est plus dans la solution Windows Azure: Comment créer un sous-répertoire dans un conteneur d’objects blob Supprime les caractères non alphanumériques d’un NSSsortingng Quelles sont les directives pratiques pour évaluer la «complétude de Turing» d’une langue?

Quelle est la différence entre ngModel. $ ModelValue et ngModel. $ ViewValue

J’ai la directive ckEditor suivante. En bas, deux variantes que j’ai vues des exemples sur la façon de définir les données dans l’éditeur: 

app.directive('ckEditor', [function () { return { require: '?ngModel', link: function ($scope, elm, attr, ngModel) { var ck = null; var config = attr.editorSize; if (config == 'wide') { ck = CKEDITOR.replace(elm[0], { customConfig: 'config-wide.js' }); } else { ck = CKEDITOR.replace(elm[0], { customConfig: 'config-narrow.js' }); } function updateModel() { $scope.$apply(function () { ngModel.$setViewValue(ck.getData()); }); } $scope.$on('modalObjectSet', function (e, modalData) { // force a call to render ngModel.$render(); }); ck.on('change', updateModel); ck.on('mode', updateModel); ck.on('key', updateModel); ck.on('dataReady', updateModel); ck.on('instanceReady', function () { ngModel.$render(); }); ck.on('insertElement', function () { setTimeout(function () { $scope.$apply(function () { ngModel.$setViewValue(ck.getData()); }); }, 1000); }); ngModel.$render = function (value) { ck.setData(ngModel.$modelValue); }; ngModel.$render = function (value) { ck.setData(ngModel.$viewValue); }; } }; }])

Quelqu’un peut-il me dire quelle est la différence entre: 

 ck.setData(ngModel.$modelValue); ck.setData(ngModel.$viewValue);

Et que dois-je utiliser? J’ai regardé la documentation angular et ça dit: 

 $viewValue Actual ssortingng value in the view. $modelValue The value in the model, that the control is bound to.

Je n’ai aucune idée de ce que l’auteur voulait dire quand il a écrit ceci dans le document 🙁

Vous regardez la documentation correcte, mais il se peut que vous soyez un peu confus. $modelValue et $viewValue ont une différence distincte. C’est ça:

Comme vous l’avez déjà noté ci-dessus:

$viewValue: réelle de la chaîne (ou de l’object) dans la vue.
$modelValue: La valeur du modèle à laquelle le contrôle est lié.

Je vais supposer que votre ngModel fait référence à un élément …? Donc, votre a une valeur de chaîne qu’il affiche à l’utilisateur, non? Mais le modèle réel pourrait être une autre version de cette chaîne. Par exemple, l’entrée peut afficher la chaîne '200' mais le (par exemple) contiendra en réalité une valeur de modèle de 200 sous forme d’entier. Ainsi, la représentation de chaîne que vous “visualisez” dans est le ngModel.$viewValue et la représentation numérique sera le ngModel.$modelValue .

Un autre exemple serait un où $viewValue serait quelque chose comme Jan 01, 2000 et $modelValue serait un object de Date javascript qui représente cette chaîne de date. Cela a-t-il du sens?

J’espère que cela répond à votre question.

Vous pouvez voir des choses comme ceci:

  • $modelValue est votre API externe, c’est-à-dire exposée à votre contrôleur.
  • $viewValue est votre API interne, vous ne devez l’utiliser qu’en interne.

Lors de l’édition de $viewValue , la méthode de rendu ne sera pas appelée, car il s’agit du “modèle rendu”. Vous devrez le faire manuellement, alors que la méthode de rendu sera appelée automatiquement lors des modifications de $modelValue .

Cependant, les informations restront cohérentes grâce à $formatters et $parsers :

  • Si vous changez $viewValue , $parsers le traduira en $modelValue .
  • Si vous modifiez $modelValue , $formatters le convertira en $viewValue .

Angular doit garder la trace de deux vues de données ngModel: il y a les données vues par le DOM (navigateur), puis il y a la représentation traitée de ces valeurs par Angular. $viewValue est la valeur côté DOM. Ainsi, par exemple, dans une la $viewValue correspond à ce que l’utilisateur a tapé dans son navigateur.

Une fois que quelqu’un tape quelque chose dans alors $viewValue est traité par $ parsers et devient la vue Angular de la valeur appelée $modelView .

Donc, vous pouvez penser que $modelView est la version traitée de la valeur par l’angle, la valeur que vous voyez dans le modèle, alors que $viewValue est la version brute.

Pour aller plus loin, imaginons que nous faisons quelque chose qui change le $modelView . Angular voit ce changement et appelle $ formatters pour créer une $viewValue mise $viewValue (basée sur le nouveau $ modelView) à envoyer au DOM.