Angularjs 递归无限重复

我想创建一个可能无限的div树

这就是我实际上正在做的：

<div ng-repeat="block in blocks">
    <p class="blocke" > {{block.title}} </p>
    <input class="childButton" ng-model="childName[$index]" type="text" placeholder="child name">
    <button class="childButton" ng-click="addChild($index)" >Add child to {{block.title}} </button>
</div>

{{block.title}
将子项添加到{block.title}

但是块中的每个块都有一个子块数组，以此类推

我希望为每个现有块创建与上面相同的div。在任何级别

---

有没有一种简单的方法可以做到这一点？

创建自定义指令，如果有子项，该指令会自动调用。这一点，加上一些编辑，应该可以起作用：

app.directive('block', ['$compile', function ($compile) {
  return {
    restrict: 'E',
    replace: true,
    scope: {
      block: '='
    },
    template: '<div>' +
      '<p class="blocke"> {{block.title}} </p>' +
      '<input class="childButton" ng-model="childName[$index]" type="text" placeholder="child name">' +
      '<button class="childButton" ng-click="addChild($index)" >Add child to {{block.title}} </button>' +
    '</div>',
    link: function($scope, $element) {
      if (angular.isArray($scope.block.childs) && $scope.block.childs.length > 0) {
        $element.append('<block ng-repeat="childBlocks in block.childs" block="childBlocks"></block>');
        $compile($element.contents().last())($scope);
      }
    }
  };
}]);

app.directive（'block'，['$compile'，function（$compile）{
返回{
限制：'E'，
替换：正确，
范围：{
块：'='
},
模板：“”+
“
{{block.title}
”+
'' +
'将子项添加到{{block.title}}+
'',
链接：函数（$scope$element）{
if（angular.isArray（$scope.block.childs）&&$scope.block.childs.length>0）{
$element.append（“”）；
$compile（$element.contents（）.last（））（$scope）；
}
}
};
}]);

---

用法

我大致了解该指令，但有一个问题。至少这对我来说是个问题。在link函数中，您测试$scope.block.childs是否是一个数组，但我拥有的是一个类似于$scope.block的块数组=[{'title'：''，'childs'：[]}]。所以我需要检查$scope.block[index].childs。我该怎么做，使用哪个索引？在这种情况下不需要索引。将此指令与
ng repeat=“block in blocks”
一起使用时，您还可以通过
block=“block”
属性传递当前块项，因此每次调用指令时，它都是
$scope.block1
中的不同块（第一次是块[0]，然后是块[1]，依此类推）。但此$scope.block从未设置。。。因为我们有block:“=”（我不知道这是什么意思），然后block=“childBlock”我假设是每个块中的块数组，但是第一次调用$scope.childs函数时没有定义，因此我不能调用$scope.block.childs
$scope.block
是由元素属性
block=“block”
设置的
block:'='
相当于
block:'=block'
，这意味着
$scope.block
将有一个值，该值在名为
block
的元素属性中设置（mindblowing..I know。第一次调用它是在您的视图中，如果passed属性有子项，则附加其他指令，子块被重复并作为
block
传递，因此在
block=“childBlocks”处创建完全不同的范围
相当于
$scope.block
除了没有显示子块之外，其他一切似乎都很正常。树是按照我的要求构建的，但显示的唯一级别是根级别。问题来自这样一个事实，即“link”中定义的函数仅在创建新的块si之后调用，而不是在添加子块时调用