为什么没有在HTML AngularJS错误在控制台中显示出来？ [英] Why don't AngularJS errors in the html show up in the console?

问题描述

下面的为了说明一个小提琴。当有这么（例如）呼吁控制器的$范围（或其父母）没有定义功能的NG-点击指令，它静静地失败。当我试图调试一个网页，这种行为是郁闷，作为一个打错的函数名可能意味着大量的时间浪费狩猎下来。我如何才能找到时被吞噬了这样的错误，为什么答案是你不能？

结果

HTML

 ＆LT; D​​IV NG-应用=AngularApp＆GT;
    ＆LT; D​​IV NG控制器=FooController的＆GT;
        ＆LT;按钮NG点击=其中noError（）＆GT;其中noError（）＆LT; /按钮＆GT;
        ＆LT;按钮NG点击=错误（）＆GT;错误（）＆LT; /按钮＆GT;
        ＆LT;按钮NG点击=作品（）＆GT;作品（）＆LT; /按钮＆GT;
        ＆LT; BR /＆GT;
        ＆LT; p NG绑定=foo的＆GT;＆LT; / P＆GT;
    ＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
 

结果

的JavaScript

  VAR angularApp = angular.module（'AngularApp'，[]）;angularApp.controller（'FooController的'，['$范围'，函数（$范围）{
    $ scope.foo = 0;    $ scope.works =功能（）{
        $ scope.foo + = 1; //没有错误，一切正常
    };    $ scope.error =功能（）{
        $ scope.foo + =巴兹; //的ReferenceError：巴兹没有定义
    };    //其中noError没有在控制器中定义，因此错误突然无所谓？
}]）;
 

解决方案

为什么ngClick不会引发坏引用引用错误

ngClick默认使用 $解析在幕后。 <一href=\"https://github.com/angular/angular.js/blob/f1b94b4b599ab701bc75b55bbbbb73c5ef329a93/src/ngMobile/directive/ngClick.js\">You可以看到，在源这里。

$解析是一个角辅助函数解析角前pressions。

您可以阅读文档为前pressions 的规则，但有关片段在下面。

  

角前pressions主场迎战JavaScript的防爆pressions
  前角pressions就像有以下不同的JavaScript前pressions：

  
  

  
• 上下文：JavaScript的前pressions是针对全局窗口评估。在棱角分明，前pressions是针对一个范围对象进行评估。

  
• 赦：在JavaScript中，试图评估未定义的属性产生的ReferenceError或类型错误。在棱角分明，前pression评价是宽容到undefined和null。

  
• 无控制流语句：你不能使用以下的中前角pression：条件语句，循环，或例外
。
  
• 过滤器：您可以在显示之前使用前pressions格式化数据中的过滤器
。
  

你怎么能解决此问题？

该文档，然后期待您的异议和回应他们。

  

如果你想运行更复杂的JavaScript code，你应该让一个控制器的方法，并呼吁从视图中的方法。如果你想给eval（）的前角pression自己，使用$ eval（）方法。

所以基本上这个想法是，前pressions是简单的code，任何复杂的逻辑应该与控制器上运行。在你的情况，你不会真的做复杂的事情，只是让坏的引用，但它似乎是从角的角度来看这个问题的答案是简单的更严格的，并组织你的code，以确保您的引用会至少存在了。

为什么会做这种方式？

这已经大部分覆盖，但在本质上，前pressions是为了处理非常简单的逻辑，为简单起见，不破坏您的应用程序进行了优化。这个想法是什么，需要更广泛的错误检查可以在code进行处理。

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?"

HTML

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

Javascript

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?
}]);

解决方案

Why ngClick doesn't throw Reference errors on bad references

ngClick defaults to using $parse under the covers. You can see that in the source here.

$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.

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

• Context: JavaScript expressions are evaluated against the global window. In Angular, expressions are evaluated against a scope object.
• Forgiving: In JavaScript, trying to evaluate undefined properties generates ReferenceError or TypeError. In Angular, expression evaluation is forgiving to undefined and null.
• No Control Flow Statements: you cannot use the following in an Angular expression: conditionals, loops, or exceptions.
• Filters: You can use filters within expressions to format data before displaying it.

How can you work around this?

The documentation then anticipates your objections and responds to them with

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.

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.

Why does it do it this way?

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屋！