捕获子指令抛出的错误

时间:2015-07-21 16:16:08

标签: javascript angularjs angularjs-directive try-catch

我的应用程序正在使用其他一些我无法控制的指令,我想通过一些信息来增加来自这些指令的任何错误,以便我知道哪些错误来自我自己,哪些不是。所以我试图编写自己的指令,它编译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>

这应该有用吗?

1 个答案:

答案 0 :(得分:2)

我尝试了创建父指令以捕获子指令错误的方法,但没有使用它,但是使用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