AngularJS未定义或为null

时间:2013-07-28 16:11:46

标签: angularjs null undefined

当我编写手表处理功能时,我会检查undefinednull上的newVal参数。为什么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);
    });
};

6 个答案:

答案 0 :(得分:156)

您始终可以将其完全添加到您的应用中

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

答案 1 :(得分:16)

我的建议是编写自己的公用事业服务。您可以在每个控制器中包含该服务或创建父控制器,将实用程序服务分配给您的作用域,然后每个子控制器都将继承它,而不必包含它。

示例: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中。只需几个选项即可使用您自己的实用程序函数扩展角度。

答案 2 :(得分:13)

I asked the same question of the lodash maintainers a while back他们回答提到!=运算符可以在这里使用:

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

这使用JavaScript的类型强制来检查undefinednull的值。

如果您使用JSHint来填充代码,请添加以下注释块以告知它您知道自己在做什么 - 大多数情况下!=被认为是错误的。

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

答案 3 :(得分:8)

为什么不简单地使用angular.isObject来否定? e.g。

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

答案 4 :(得分:6)

@ STEVER的回答令人满意。但是,我认为发布略有不同的方法可能会有所帮助。我使用一个名为isValue的方法,它为除null,undefined,NaN和Infinity之外的所有值返回true。在NaN中使用null和undefined进行集中是我的功能的真正好处。使用null和undefined来集中无限是更有争议的,但坦率地说,我的代码并不那么有趣,因为我几乎从不使用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)));
  };
})

答案 5 :(得分:2)

lodash提供了一种简写方法来检查undefined或null: _.isNil(yourVariable)