如何在 Angular 表达式中获取一种范围变量？

Posted 2023-03-11

【中文标题】如何在 Angular 表达式中获取一种范围变量？

【英文标题】：How to get a type of scope variable in Angular expression?

【发布时间】：2016-06-22 02:58:56

【问题描述】：

让我们在作用域上定义简单的布尔值：

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

mymodal.controller('MainCtrl', function ($scope) 
    $scope.b = false;
);

如何获取表达式中变量的类型？ typeOf 和 Object.prototype.Tostring.call 不起作用。

<div ng-controller="MainCtrl" class="container">
        <div>
           b 
           typeOf(b) 
           Object.prototype.toString.call(b) 
        </div>
</div>

这里是 JSFiddle：http://jsfiddle.net/g8Ld80x3/2/

【参考方案1】：

我认为最好的方法是创建一个自定义过滤器并在您的表达式中随意使用它，您可以查看用于获取对象的 Object.keys 的 this 链接

对于您的情况，您可以使用

angular.module('customfilter', []).filter('typeof', function() 
  return function(obj) 
    return typeof obj
  ;
);

【讨论】：

好主意！简单而强大。我喜欢它。

为什么没有将它内置到 Angular 中？也许它已经在 Angular 2 中了。虽然***.com/questions/37511055/… 看起来不像。

【参考方案2】：

只是为了展示 Zamboney 对我的示例代码的回答：

控制器：

angular.module('customfilter', []).filter('getType', function() 
  return function(obj) 
    return typeof obj
  ;
);

var mymodal = angular.module('mymodal', ['customfilter']);

mymodal.controller('MainCtrl', function ($scope) 
    $scope.b = false;
);

查看：

<div ng-controller="MainCtrl" class="container">
  <div>
     b 
     b | getType 
    <div ng-if="(b | getType) == 'number'">
      It's a number
    </div>
    <div ng-if="(b | getType) == 'boolean'">
      It's a boolean
    </div>
  </div>
</div>

和小提琴：http://jsfiddle.net/g8Ld80x3/5/

【参考方案3】：

您不能这样做，并且有充分的理由：Angular expression 解析器不允许在模板中进行此类操作。

如果您真的希望能够这样做，我建议在 $rootScope 上显式设置帮助方法，以便它可以在您的所有模板中使用：

mymodal.run(function($rootScope) 
    $rootScope.typeOf = function(value) 
        return typeof value;
    ;
);

您甚至可以参考 Angular 自己的实用方法：

 mymodal.run(function($rootScope) 
    ['isArray', 'isDate', 'isDefined', 'isFunction', 'isNumber', 'isObject', 'isString', 'isUndefined'].forEach(function(name) 
        $rootScope[name] = angular[name];
    );
);

并在模板中使用 isArray(arr) 。

【讨论】：

这是一个很好的答案，非常感谢。但是 Zamboney 创建过滤器的想法对我来说更好。无论如何 - 再次感谢。

实际上，在这种情况下进行过滤是非常糟糕的主意，至少有两个原因，但无论哪种方式更适合您。

有什么缺点？

过滤器的性能不是很好。那么你将如何在 ngIf 中使用它呢？你可以，但这很笨拙。

说到用法我想到了这个问题：***.com/questions/35862140/…。第二个原因是什么？

【参考方案4】：

在控制器中尝试这样的事情（我认为不可能像你想要的那样直接在表达式中）：

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

mymodal.controller('MainCtrl', function ($scope) 
    $scope.b = false;
    $scope.getBType = function(test)
        return( typeof test);
    
);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app='mymodal' ng-controller="MainCtrl" class="container">
        <div>
           getBType(b) 
        </div>
</div>

【讨论】：

我不想在控制器中这样做。我想在表达式中执行 typeof。也在ng-if 或ng-show/ng-hide 指令中。

首先，您必须在控制器中执行此操作，然后将其返回给表达式。

这不应该是返回字符串而不是调用警报吗？

你可以使用return方法代替alert。重要的是它正在工作。查看更新的答案。

【参考方案5】：

当您尝试访问特定值的类型 typeof 时，在当前代码中您正在 view 中执行此操作，这对于此类操作来说已经很晚了。

相反，您可以在控制器范围内创建一个函数，然后从那里返回它：

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

mymodal.controller('MainCtrl', function ($scope) 
    $scope.b = false;
    $scope.getTypeof = function(it) return typeof(it); ;
);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app='mymodal' ng-controller="MainCtrl" class="container">
        <div>
           b  :  getTypeof(b) 
          
        </div>
</div>

【参考方案6】：

html

<div ng-controller="MainCtrl" class="container">
        <div>
           b <br>
           typeOf(b) <br>
        </div>
</div>

JS

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

mymodal.controller('MainCtrl', function ($scope) 
    $scope.b = false;
    $scope.typeOf = function (v) return (typeof v);
);

结果

false
boolean

【参考方案7】：

$scope.b = new String('name');

//根据上面的说法，对象会是typeof操作符的结果。它不检查 typeof 运算符的类型：http://bonsaiden.github.io/javascript-Garden/#types.typeof