Question

我的问题是发现角度表达式中可能出现的拼写错误，特别是函数名称中的拼写错误。

考虑下面的片段：

我有两个按钮，第一个有正确的拼写，第二个有角度表达的拼写错误。单击第二个按钮不会执行任何操作，也不会提供有关潜在错误的提示。

我现在的问题是：有没有办法检测错误的函数调用（在执行应用程序时不存在）？

我不是在构建或单元测试过程中寻找一些检查可能性，而是希望看到一种方法，当在执行应用程序时在浏览器中运行错误的表达式时，我可以意识到这样的潜在问题。 / p>

＆＃13;

angular.module("myApp", [])
  .controller("TestController", function($scope){
    $scope.myFunction = function() {
      console.log("Hello World");
    };
  });

angular.element(document).ready(function () {
  angular.bootstrap(document, ['myApp']);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<section ng-controller="TestController">
  <button ng-click="myFunction()">myFunction</button>
  <button ng-click="myFunctio()">myFunctio</button>
</section>

＆＃13;

Answer 1

我不熟悉角度的内置选项来做到这一点（使用绑定到＆＃34;未定义＆＃34;对象是合法的UC，因为事情可能变成＆＃34;未定义＆＃34;在程序运行期间） - 但你可以编写自己的＆＃34; ng-click＆＃34;指令，如果没有找到要绑定的函数，则引发错误（异常或更好 - 控制台错误/警告）。

Answer 2

量角器（和其他端到端测试框架）将为您做到这一点。

Answer 3

这是一个关于Angular的极为普遍的抱怨。即使为Closure编译器编写代码，包含所有类型注释和所有内容，这些仍然可以解决问题。

你可以将某些东西拼凑在一起，我已经看到了将所有事件发送到公共代理并在绑定范围内查找目标处理程序等事情，等等。但它似乎总是比它的价值更麻烦。

您的单元测试是您捕获此类事物的地方。这就是为什么能够通过触发事件来测试模板代码对于Angular开发人员来说非常重要。如果触发该按钮单击并且您的测试失败（例如，您的spyOn处理程序永远不会被调用），请检查模板。

Answer 4

我不确定这是否适用于函数调用，但它可以解决拼写错误的部分问题。在Scott Allen的关于Pluralsight的AngularJS Playbook课程中，他建议为$interpolate服务创建一个装饰器，以查看是否有任何绑定可能不正确。这是代码：

(function(module) {

    module.config(function ($provide) {
        $provide.decorator("$interpolate", function ($delegate, $log) {

            var serviceWrapper = function () {
                var bindingFn = $delegate.apply(this, arguments);
                if (angular.isFunction(bindingFn) && arguments[0]) {
                    return bindingWrapper(bindingFn, arguments[0].trim());
                }
                return bindingFn;
            };

            var bindingWrapper = function (bindingFn, bindingExpression) {
                return function () {
                    var result = bindingFn.apply(this, arguments);
                    var trimmedResult = result.trim();
                    var log = trimmedResult ? $log.info : $log.warn;
                    log.call($log, bindingExpression + " = " + trimmedResult);
                    return result;
                };
            };

            angular.extend(serviceWrapper, $delegate);
            return serviceWrapper;

        });
    });

}(angular.module("common")));

Angular：通过ng-click了解函数调用中的拼写错误

4 个答案: