1

我有一个循环指令依赖情况。

DirectiveA.template = '<div switch-on="v"> <DirectiveB when="someVal" /> </div>';
DirectiveB.template = '<div> <DirectiveA /> </div>';

如果您设置了这种情况，这将导致 Chrome 挂起并最终使页面崩溃。

我认为原因是因为 $compile 的工作方式会导致无休止的递归。

但是，根据我的 switch 语句，您可以看到，有一个递归终止子句。一旦“someVal”不等于 $scope.v 它应该结束递归。

所以我的问题是：有没有办法在 2 个指令之间建立循环依赖关系？

4

1 回答 1

4

因此，这类似于递归指令。正如您所了解的，Angular 将永远旋转。这是因为$compile和link函数在 Angular 中的工作方式。要修复它，您需要有条件地编译循环引用。这是一个假设递归的示例，但方法非常相似。

基本上，您需要将模板中的条件逻辑提取到link指令的函数中。在您的情况下，最终导致循环引用终止的条件是 in DirectiveA。它看起来像这样（未经测试，因为我没有完整的代码示例）：

app.directive('DirectiveA', function ($compile) {
  return {
    link: function (scope, element) {
      if(scope.v === "circular_condition") {
        element.append('<DirectiveB when="someVal" />');
        $compile(element)(scope);
      }
    }
  }
});

scope.v如果会改变，实际的解决方案可能会更复杂。您必须根据. $watch_ 但这进入了更普通的 Angular 东西的领域，所以我不会用它来混淆响应。vDirectiveBv

于 2013-10-27T02:15:34.047 回答