捕获由子指令抛出的错误。

Question

我的应用程序正在使用一些我无法控制的其他指令，我希望能够通过添加一些信息来增强来自这些指令的任何错误，以便我知道哪些错误来自我自己，哪些不是。因此，我尝试编写自己的指令，它会在try/catch块中编译任何内容，以便我可以捕获错误并适当处理它们。

结果发现以下代码将无法捕获任何错误，可能是因为编译是异步执行的？

// in compile fn:
foreignEl = element.contents().remove();

// in link fn:
element.append(foreignEl);

try{
  $compile(foreignEl)(scope)
} catch(e){
  console.error("NOT MY FAULT: " + e.message);
}

我考虑使用以下指令：

我在思考如何使用这个指令：

<my-error-catcher>
  <the-foreign-directive>
  </the-foreign-directive>
</my-error-catcher>

这个会起作用吗？

- cdbeelala89

Answer 1

我尝试过你创建一个父指令来捕获子指令错误的方式，但是没有成功，不过使用装饰器可能是更合适的方法来实现你无法控制的指令抛出的错误：

.config(function($provide) {
  $provide.decorator('theForeignDirective', function($delegate) {
    var directive = $delegate[0];
    //copy the directive's original link function
    var directiveLink = directive.link;

    directive.compile = function() {
      try {
        var bindedLink = directiveLink.apply(this, arguments);
        return function() {
          bindedLink.apply(this, arguments);
        };
      } catch(e) {
        console.error("NOT MY FAULT: " + e.message);
      }
    };

    return $delegate;

  });
});

这是一个可用的 Plunkr http://plnkr.co/edit/0Dk3DKhaNrxgSri5G54E。

- yvesmancera