Pourquoi le numéro de retour {{indéfini + numéro}} ?

Question

Je travaille sur un projet de AngularJS. J’ai remarqué que l’expression suivante renvoie un nombre.

Dans la vue, `` de sortie 10.

En JavaScript, `` sortira NaN.

Pourquoi est-ce comportement différent dans une vue ?

Answer 1

C'est l'avantage de l'interpolation.

L'Interpolation de balisage avec des expressions intégrées est utilisé par AngularJS pour fournir des données de liaison pour les nœuds de texte et des valeurs d'attribut.

Si la valeur interpolée n'est pas une Chaîne, il est calculé comme suit:

• indéfini et null sont converties " (chaîne vide)
• si la valeur est un objet qui n'est pas un Nombre, une Date ou un Tableau, $interpolate recherche personnalisée toString() de la fonction sur l'objet, et l'utilise.
• si ce qui précède ne s'applique pas, JSON.stringify est utilisé.

Au cours de l'exécution du compilateur utilise l' $interpolate service pour voir si les nœuds de texte et les attributs de l'élément contient l'interpolation de balisage avec des expressions intégrées.

Aussi, l'angle d'utiliser un compilateur interpolateDirective et enregistre les observateurs afin d'écouter les changements de modèle. C'est le processus de digérer cycle.

Lire plus ici de comprendre comment l'interpolation fonctionne.

Pourquoi {{'' == +Infinity}} retourne vrai ?

Dans AngularJS, $interpolate service évalue +Infinity de 0 de la valeur.

angular.module('app', [])

.controller('Controller', ['$injector', function($injector) {

}]);
setTimeout(function() {
  angular.bootstrap(document.getElementById('body'), ['app']);
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<div id="body">
  <div ng-controller="Controller">
    {{+Infinity}}
  </div>
</div>

Maintenant, l'expression demeurent {{0==''}}.

Pourquoi 0=='' est évaluée à l' true ?

Le côté gauche est de type Number. Le côté droit est de type String.

Dans ce cas, l'opérande de droite est contrainte au Numéro de type:

0 == Number('') => 0 == 0,

qui est évaluée à l' true valeur booléenne.

Est appliqué ici Le Résumé de l'Égalité de l'Algorithme de Comparaison.

Si le Type(x) est le Nombre et le Type(y) est une Chaîne, retourner le résultat de la comparaison x == ToNumber(y).

Answer 2

Pour expliquer en faisant référence code AngularJS, c'est la magie:

function plusFn(l, r) {
  if (typeof l === 'undefined') return r;
  if (typeof r === 'undefined') return l;
  return l + r;
}

Si vous avez un "plus" de l'expression, cette fonction est analysée dans votre modèle.

L'expression de remplacement est invoquée par l'Analyseur.parse (angulaire.js:16155) ou à analyser.js:1646 (https://github.com/angular/angular.js/blob/87a586eb9a23cfd0d0bb681cc778b4b8e5c8451d/src/ng/parse.js#L1646).