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

Question

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

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/

Answer 1

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

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

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

Answer 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/

Answer 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) }}。

Answer 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>

Answer 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>

Answer 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

Answer 7

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

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