web-dev-qa-db-fra.com

Non défini ou nul pour AngularJS

Quand j'écris des fonctions de manipulation de montre, je vérifie newVal param sur undefined et null. Pourquoi AngularJS a-t-il un tel comportement, mais n’a-t-il pas de méthode d’utilité particulière? Donc, il y a angular.isUndefined mais pas angular.isUndefinedOrNull. Ce n’est pas difficile à implémenter à la main, mais comment prolonger angular pour avoir cette fonction dans chaque contrôleur? Tnx.

Modifier :

L'exemple:

$scope.$watch("model", function(newVal) {
    if (angular.isUndefined(newVal) || newVal == null) return;
    // do somethings with newVal
}

Est-ce une pratique acceptée commune de gérer une telle manière?

Éditez 2 :

L’exemple de JSFiddle ( http://jsfiddle.net/ubA9r/ ):

<div ng-app="App">
  <div ng-controller="MainCtrl"> 
      <select ng-model="model" ng-options="m for m in models">
          <option value="" class="ng-binding">Choose model</option>
      </select>
      {{model}}
  </div>
</div>

var app = angular.module("App", []);

var MainCtrl = function($scope) {
    $scope.models = ['Apple', 'Banana'];
    $scope.$watch("model", function(newVal) {
        console.log(newVal);
    });
};
angularjsnullundefined
78
slo2ols

Vous pouvez toujours l'ajouter exactement pour votre application

angular.isUndefinedOrNull = function(val) {
    return angular.isUndefined(val) || val === null 
}
156
Stepan Suvorov

Ma suggestion est de créer votre propre service public. Vous pouvez inclure le service dans chaque contrôleur ou créer un contrôleur parent, attribuer le service utilitaire à votre étendue, puis chaque contrôleur enfant héritera de celui-ci sans que vous deviez l'inclure.

Exemple: http://plnkr.co/edit/NI7V9cLkQmEtWO36CPXy?p=preview

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope, Utils) {
    $scope.utils = Utils;
});

app.controller('ChildCtrl', function($scope, Utils) {
   $scope.undefined1 = Utils.isUndefinedOrNull(1);  // standard DI
   $scope.undefined2 = $scope.utils.isUndefinedOrNull(1);  // MainCtrl is parent

});

app.factory('Utils', function() {
  var service = {
     isUndefinedOrNull: function(obj) {
         return !angular.isDefined(obj) || obj===null;
     }

  }

  return service;
});

Ou vous pouvez également l'ajouter à rootScope. Quelques options pour étendre angular avec vos propres fonctions utilitaires.

16
lucuma

J'ai posé la même question aux responsables de la maintenance lodash il y a quelque temps et ils ont répondu en mentionnant que l'opérateur != peut être utilisé ici:

if(newVal != null) {
  // newVal is defined
}

Ceci utilise la contrainte de type de JavaScript pour vérifier la valeur de undefined ou null.

Si vous utilisez JSHint pour filtrer votre code, ajoutez les blocs de commentaires suivants pour lui indiquer que vous savez ce que vous faites - la plupart du temps, != est considéré comme incorrect.

/* jshint -W116 */ 
if(newVal != null) {
/* jshint +W116 */
  // newVal is defined
}
13
Tom Spencer

Pourquoi ne pas simplement utiliser angular.isObject avec négation? par exemple.

if (!angular.isObject(obj)) {
    return;
}
8
Pete

La réponse de STEVER est satisfaisante. Cependant, j’ai pensé qu’il pourrait être utile de publier une approche légèrement différente. J'utilise une méthode appelée isValue qui renvoie true pour toutes les valeurs sauf null, undefined, NaN et Infinity. Lump in NaN avec null et indéfini est le véritable avantage de la fonction pour moi. Intégrer Infinity dans null et undefined est plus discutable, mais franchement pas intéressant pour mon code car je n’utilise pratiquement jamais Infinity.

Le code suivant est inspiré par Y.Lang.isValue . Voici le source pour Y.Lang.isValue.

/**
 * A convenience method for detecting a legitimate non-null value.
 * Returns false for null/undefined/NaN/Infinity, true for other values,
 * including 0/false/''
 * @method isValue
 * @static
 * @param o The item to test.
 * @return {boolean} true if it is not null/undefined/NaN || false.
 */
angular.isValue = function(val) {
  return !(val === null || !angular.isDefined(val) || (angular.isNumber(val) && !isFinite(val)));
};

Ou dans le cadre d'une usine

.factory('lang', function () {
  return {
    /**
     * A convenience method for detecting a legitimate non-null value.
     * Returns false for null/undefined/NaN/Infinity, true for other values,
     * including 0/false/''
     * @method isValue
     * @static
     * @param o The item to test.
     * @return {boolean} true if it is not null/undefined/NaN || false.
     */
    isValue: function(val) {
      return !(val === null || !angular.isDefined(val) || (angular.isNumber(val) && !isFinite(val)));
  };
})
6
Steven Wexler

lodash fournit une méthode abrégée pour vérifier si indéfini ou nul: _.isNil(yourVariable)

2
nigong