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

Question

是否有转储或检查表达式结果的好方法？有时当我做

{{some_expression}}

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

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

{{ {'a': 1} }}

但是，如果您尝试检查计算结果为 null、undefined 或 '' 的表达式，它们都是 难以区分 !

{{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如此“宽容”，他们似乎不会引发错误；他们只是默默地吞下错误并返回 undefined :

In JavaScript, trying to evaluate undefined properties generates ReferenceError or TypeError. In Angular, expression evaluation is forgiving to undefined and 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