为什么html中的AngularJS错误不会出现在控制台中？

Question

这是一个小插图.当有一个ng-click指令(例如)调用未在控制器的$ scope(或其父节点)上定义的函数时,它会无声地失败.当我尝试调试网页时,这种行为令人抓狂,因为错误输入的函数名称可能意味着浪费了很多时间.我怎样才能找出这样的错误被误吞的原因,为什么答案"你做不到？"

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

Answer 1

为什么ngClick不会在错误引用上抛出引用错误

ngClick默认使用$parse封面. 你可以在这里看到源代码.

$ parse是一个角度辅助函数,用于解析角度表达式.

您可以在文档中阅读有关表达式的规则,但相关的代码段如下所示.

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

• 上下文:JavaScript表达式是针对全局窗口进行评估的.在Angular中,表达式是根据范围对象进行评估的.
• 原谅:在JavaScript中,尝试评估未定义的属性会生成ReferenceError或TypeError.在Angular中,表达式求值是对undefined和null的宽容.
• 无控制流语句:您不能在Angular表达式中使用以下内容:条件,循环或异常.
• 过滤器:您可以在表达式中使用过滤器在显示数据之前格式化数据.

你怎么解决这个问题？

然后,文档会预测您的异议并对其作出回应

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

所以基本上这个想法是表达式用于简单的代码,任何复杂的逻辑应该从控制器运行.在你的情况下,你并没有真正做复杂的事情,只是做了不好的引用,但似乎从Angular的观点来看,答案就是"更加自律"并构建你的代码以确保你的引用至少存在.

为什么这样做呢？

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