Question

有没有一种好方法来转储或检查表达式的结果？有时我做的时候

{{some_expression}}

，页面上没有任何内容显示该表达式的结果应显示。如何确定表达式是返回null，undefined还是空字符串''？

如果它是一个普通的对象，就像这样，它会显示一个很好的程序员友好的对象表示，这很棒：

{{ {'a': 1} }}

但是如果你试图检查一个评估为null，undefined或＆＃39;＆＃39;的表达式，它们彼此无法区分！

{{null}}
{{undefined}}
{{''}}

那你怎么知道它是哪一个？

我尝试使用JSON.stringify：

{{ JSON.stringify(null) }}

但是JSON似乎无法从Angular表达式中获取，因为它是来自window的方法，而不是范围的属性（请参阅related question about accessing methods from window）。

我尝试使用typeof：

typeof {}: {{ typeof {'a': 1} }}

但会导致错误：

Error: [$parse:syntax] Syntax Error: Token '{' is an unexpected token at column 9 of the expression [ typeof {'a': 1} ] starting at [{'a': 1} ].

那么如何使用JSON.stringify（...或console.log）之类的方法将值转储到模板中呢？

一般来说，除了试验和错误之外，还有一种调试Angular表达式的好方法吗？由于Angular expressions是如此宽容＆＃34;，他们似乎不会引发错误;他们只是默默地吞下错误并返回undefined：

在JavaScript中，尝试评估未定义的属性 ReferenceError或TypeError。在Angular中，表达式评估是原谅未定义和null。

但是没有看到某种错误信息，你怎么知道Angular表达的哪个部分有问题？

Answer 1

您可以添加自定义过滤器以进行调试：

app.filter('debug', function() {
  return function(input) {
    if (input === '') return 'empty string';
    return input ? input : ('' + input);
  };
});

用法：

{{ value | debug }}

演示： http://plnkr.co/edit/U44BCjBhgsFedRkHASlc?p=preview

Answer 2

推荐的方法是使用AngularJS的日志记录服务$log。首先，您需要将服务注入控制器并将其分配给范围变量，如下所示：

app.controller('MyCntrl', function($log){
    $scope.$log = $log;

然后在你的模板中，我们就像其他功能一样：

<span>{{$log.log(value}}</span>

如果您希望能够使用typeof，它的工作方式基本相同：

$scope.getTypeOf = function(val){ return typeof val; };

<span>{{getTypeOf(val)}}</span>

Answer 3

基于 tasseKATT 和 ogc-nick 的优秀答案，我添加了这两个过滤器。它们是用CoffeeScript编写的，但如果您愿意，可以使用JavaScript equivalent。发布在这里，以防其他人有用...

.filter 'debug', ->
  (input) ->
    if typeof input is 'undefined'
      'undefined'
    else
      JSON.stringify(input)

.filter 'typeof', ->
  (input) ->
    typeof input

现在我可以从以下每个表达式中获得一些有意义的调试输出：

  {{null | debug}}
  {{undefined | debug}}
  {{'' | debug}}

Answer 4

如果您正在使用Chrome，则可以尝试使用Batarang扩展程序，以便检查模型上的属性。通过打开开发人员控制台（CTRL + SHIFT + I）来访问它，然后您应该看到一个Batarang选项卡。您必须单击以启用，然后您应该获得页面上显示的所有Angular模型的列表。他们不会被直觉命名，但你可以点击它们并推断出哪些是哪个。

您是否尝试过将console.log()放入双层？如果你只想要一个快速而懒惰的方法，这也可能有用。

Answer 5

JsonPipe可能更容易...

{{ object ! json }}

请参阅：https://angular.io/api/common/JsonPipe

如何从ng-bind {{}} Angular表达式调试/转储值？

5 个答案: