为什么控制台中html的AngularJS错误不显示? [英] Why don't AngularJS errors in the html show up in the console?

查看:136
本文介绍了为什么控制台中html的AngularJS错误不显示?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

以下是小提琴的说明。当有一个ng-click指令(例如)调用未在控制器的$范围(或其父级)上定义的函数时,它会以静默方式失败。当我试图调试一个网页时,这个行为是令人生畏的,因为一个错误的函数名称可能意味着很多浪费的时间狩猎它。我怎么知道错误被这样吞噬,为什么答案你不能?

Here's a fiddle for illustration. When there's an ng-click directive that (for example) calls a function not defined on the controller's $scope (or its parents), it fails silently. When I'm trying to debug a webpage, this behavior is maddening, as a mis-typed function name can mean a lot of wasted time hunting it down. How can I find out when errors are being swallowed like this, and why is the answer "you can't?"


<div ng-app="AngularApp">
    <div ng-controller="FooController">
        <button ng-click="noError()"> noError() </button>
        <button ng-click="error()"> error() </button>
        <button ng-click="works()"> works() </button>
        <br/>
        <p ng-bind="foo"></p>
    </div>
</div>


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

angularApp.controller('FooController', ['$scope', function($scope) {
    $scope.foo = 0;

    $scope.works = function () {
        $scope.foo += 1; // no error, everything works
    };

    $scope.error = function () {
        $scope.foo += baz; // ReferenceError: baz is not defined
    };

    // noError is not defined in the controller, so errors suddenly don't matter?
}]);


推荐答案

为什么ngClick不会抛出参考错误



ngClick默认使用封面下的 $ parse 您可以看到在这里的来源

$ parse 是一个角度帮助函数,用于分析角度表达式。

$parse is an angular helper function that parses angular expressions.

您可以阅读有关表达式的规则,但相关的代码段在下面。

You can read about the rules for expressions in the documentation but the relevant snippet is below.


角度表达式与JavaScript表达式
角度表达式类似于JavaScript表达式,具有以下区别:

Angular Expressions vs. JavaScript Expressions Angular expressions are like JavaScript expressions with the following differences:


  • 上下文:针对全局窗口评估JavaScript表达式。在角度,表达式是针对范围对象进行评估。

  • 宽恕:在JavaScript中,尝试评估未定义的属性会生成ReferenceError或TypeError。在Angular中,表达式评估是宽容的,未定义和null。

  • 无控制流语句:您不能在Angular表达式中使用以下内容:条件,循环或异常。 / li>
  • 过滤器:您可以使用表达式中的过滤器在显示数据之前格式化数据。



你如何解决这个问题?



然后,文档预计您的反对意见,并以

How can you work around this?

The documentation then anticipates your objections and responds to them with


如果要运行更复杂的JavaScript代码,应该使其成为控制器方法,并从视图中调用方法。如果你想要eval()一个Angular表达式,请使用$ eval()方法。

If you want to run more complex JavaScript code, you should make it a controller method and call the method from your view. If you want to eval() an Angular expression yourself, use the $eval() method.

所以基本上这个想法是表达式是用于简单的代码,并且任何复杂的逻辑应该从控制器运行。在你的情况下,你不是真的做复杂的事情,只是做错误的参考,但是似乎从Angular的角度来看,答案只是更加规范,并且构建你的代码,以确保你的引用将至少存在

So basically the idea is that expressions are for simple code, and any complex logic should be run from with a controller. In your case, you're not really doing complex things, just making bad references, but it seems like the answer to that from Angular's point of view is simply "be more disciplined" and structure your code to ensure your references will at least exist.

这已经被大部分覆盖,但实质上,表达式意味着处理非常简单的逻辑,并且为了简化而被优化,而不是破坏你的应用程序。这个想法是,任何需要更广泛的错误检查的东西都可以在代码中处理。

This has already been mostly covered, but in essence, expressions are meant to handle very simple logic, and are optimized for simplicity and not breaking your app. The idea is that anything that requires more extensive error checking can be handled in code.

这篇关于为什么控制台中html的AngularJS错误不显示?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆