web-dev-qa-db-ja.com

未定義またはAngularJSの場合はnull

私がウォッチ処理関数を書くとき、私はundefinedとnullのnewValパラメータをチェックします。なぜAngularJSはそのような振る舞いをしますが、特定の実用的な方法を持たないのですか？ angular.isUndefinedはありますが、angular.isUndefinedOrNullはありません。それを手作業で実装するのは難しくありませんが、各コントローラにその機能を持たせるためにangleをどのように拡張するのでしょうか。 TNX。

編集：

例：

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

そのような方法を扱うことは一般的に受け入れられているやり方ですか？

編集2：

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

あなたはいつもあなたのアプリケーションにぴったり追加できます

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

あなたへの私の提案はあなた自身のユーティリティサービスを書くことです。各コントローラにサービスを含めるか、親コントローラを作成し、ユーティリティサービスを自分のスコープに割り当てると、すべての子コントローラがこれを継承する必要がなくなります。

例： 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;
});

あるいは、それをrootScopeに追加することもできます。あなた自身の効用関数で角度を拡張するためのほんの少しのオプション。

16
lucuma

私はしばらく前にlodashメンテナに同じ質問をしました そして彼らは!=演算子をここで使うことができると言って答えました：

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

これはJavaScriptの型強制を使ってundefinedまたはnullの値をチェックします。

コードのリントにJSHintを使用している場合は、次のコメントブロックを追加して、自分が何をしているのかを知っていることを伝えます - ほとんどの場合、!=は悪いと見なされます。

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

単にangular.isObjectを否定して使わないのはなぜですか？例えば.

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

@ STEVERの答えは満足のいくものです。しかし、少し異なるアプローチを投稿すると便利かもしれないと思いました。 isValueというメソッドを使用します。このメソッドは、null、undefined、NaN、Infinity以外のすべての値に対してtrueを返します。 NaNをnullおよび未定義でまとめることは、私にとってこの関数の本当の利点です。 Infinityをnullおよび未定義でまとめることは、より議論の余地がありますが、私はInfinityを実際には決して使用しないので、率直に言って私のコードにとってはそれほど興味深いものではありません。

次のコードは Y.Lang.isValue からヒントを得たものです。これがY.Lang.isValueの source です。

/**
 * 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)));
};

または工場の一部として

.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 は未定義かnullかをチェックするための簡単な方法を提供します：_.isNil(yourVariable)

2
nigong