javascript - 捕获子指令抛出的错误

Question

我的应用程序正在使用其他一些我无法控制的指令，我想用一些信息来增加来自这些指令的任何错误，以便我知道哪些错误来 self 自己，哪些不是。所以我尝试编写自己的指令，它编译 try/catch block 中的任何内容，以便我可以捕获错误并适本地处理它们。

我发现下面的代码不会捕获任何错误，大概是因为编译是异步执行的吧？

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

这应该行得通吗？

Answer 1

我尝试了您创建父指令以捕获子指令错误的方法，但没有成功，而是使用 decorators可能是实现捕获由您无法控制的指令引发的错误的目标的更合适的方法:

.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