Question

我有循环指令依赖情况。

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

如果你设置了这种情况，这样做会挂起Chrome并最终导致页面崩溃。

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

但是，正如您可以根据我的switch语句看到的那样，有一个递归终止符子句。只要“someVal”不等于$ scope.v就应该结束递归。

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

Answer 1

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

基本上，您需要将条件逻辑从模板中提取到指令的link函数中。在您的情况下，最终将导致终止Cirluar引用的条件位于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 v属性，并根据DirectiveB的值添加/删除v。但是这进入了更正常的Angular东西的范围，所以我不会因为这个问题而感到浑浊。

具有循环依赖性的AngularJS指令

1 个答案: