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


80

時計処理関数を作成するときは、newValパラメータをオンundefinedとでチェックしますnull。AngularJSにそのような動作があるのに、特定のユーティリティメソッドがないのはなぜですか?ですangular.isUndefinedが、ありませんangular.isUndefinedOrNull。手作業でそれを実装するのは難しいことではありませんが、各コントローラーでその機能を持つために角度をどのように拡張しますか?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);
    });
};

1
あなたはcoffeescriptに切り替えることができます。それを行う疑問符postifix演算子があります。
Patryk Ziemkowski 2013

そのような機能が必要な場合、実際の事例を教えていただけますか?
Stepan Suvorov 2013

3
なぜ未定義のチェックを失うだけチェックをnewVal == null
David Sherret 2014年

3
newValが定義されていない場合、(newVal === null)はfalseを返すためです。
Greg Dougherty 2015

はい、newVal === null偽になりますが、newVal == null真になります。デビッドは正しいです。
PatrickMcElhaney19年

回答:


160

アプリケーションに合わせていつでも正確に追加できます

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

jsライブラリをそのように拡張することが常に良いとは限らないことを私は知っていますが、それは私の検索に非常に近いように見えます。実は、なぜ私がそれにこだわったのか、もっと興味があります。ウォッチハンドラーで未定義およびnullを処理することは標準的な方法ですか?
slo2ols 2013

まあ、私見、良い構造のアプリケーションでは、そのようなケースはないはずです。
Stepan Suvorov 2013

わかった、thx。しかし、私はまだ「null」は正しい選択の結果であり、「undefined」と区別する必要があると思います。
Stepan Suvorov

24
@STEVERよく構造化されたアプリケーションでは、なぜ「null」が悪いのでしょうか。たとえば、ユーザーがログインしているときにのみ変数にユーザーデータを入力する必要がある場合、ログイン前とログアウト後の適切な値はnullです。
RonLugge 2014

17

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

例: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に追加することもできます。独自のユーティリティ関数を使用してAngularを拡張するためのいくつかのオプション。


4
私は、効用関数はDIであってはならないと強く信じています
slo2ols 2013

@ slo2olsをカプセル化して、サービスを作成し、それをrooにのみ注入する場合があります
lucuma 2014年

14

私はしばらく前にlodashメンテナに同じ質問をしました、そして彼らは!=オペレーターがここで使われることができると言って答えました:

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

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

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

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

9

単純angular.isObjectに否定で使用してみませんか?例えば

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

...しかし、値がどのタイプであるかを知っていてangular.isX、一致する方法を選択できる場合は、優れたオプションです。
Phasmal 2016年

nullオブジェクトです
spicykimchi 2017

isObjectドキュメントから:戻り値:がそうでない場合valueはTrue 。Objectnull
DerMike 2017

7

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

次のコードは、Y.Lang.isValueに触発されています。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)));
};

または工場の一部として

.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)));
  };
})

val === null || !angular.isDefined(val)ただに置き換えてみませんval == nullか?
J.Steve 2017

3

lodashは、未定義またはnullかどうかを確認するための簡単な方法を提供します。 _.isNil(yourVariable)

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.