Javascript ng包含和ng重复-删除子项

我可能只是想尝试一下，但是我在下面的代码中遇到了问题。我有嵌套的ng repeats和ng includes，希望从任意嵌套级别删除一个项。所以

<div ng-repeat="item in List" ng-include="'item.html'">
</div>

item.html

<div>
   <h1>{{ item.title }}</h1>
   <div ng-repeat="item in item.List" ng-include="'item.html'"></div>
   <button ng-click="removeItem(item)">Remove me!</button>
</div>

{{item.title}
把我带走！

显然，如果我可以访问父对象的

列表

数组，我可以根据索引将其拼接出来，但是我对如何访问父对象有着严重的困惑。知道如何将父项和

项一起传递到ng include中吗

你知道我如何将父项与项目一起传递到ng include中吗

我认为将父代传递给子代将导致代码复杂性和难以维护。我还保证，当我们谈论大数据时，它会影响性能。您不使用带有隔离作用域的嵌套指令，因此我将使用其他方法根据唯一值a从嵌套树中删除节点。例如：

function removeFromTree(parent, childNameToRemove){
      console.log(parent);
           parent.nodes = parent.nodes.filter(function(child){ 
             return child.name !== childNameToRemove;
           }).map(function(child){ 
              return removeFromTree(child, childNameToRemove);
           });
    return parent;
   }


    $scope.removeItem = function(item){
       $scope.displayTree[0] = removeFromTree( $scope.displayTree[0], item.name);
    }



完整代码
HTML

你们能用plunker/fiddle提供演示来演示你们的问题吗？你们能把你们的场景再充实一点吗？使用
ng include
来创建这样的递归是非常少见的，而且通常令人困惑
$parent
可能会做你想做的事，但可能会弄得一团糟；
$parent.$parent.$parent
的代码很快就会变得非常难看。没有更多的东西可以充实了。一个项目需要能够从其父项的
列表中删除自己，这样它就不需要超过一个级别。我尝试了
$parent
，但它不公开列表数组，只公开父控制器。有什么更好的方法可以像这样进行递归呢？我考虑过这种方法，但是使用guid而不是name字段。感觉这是最干净的方法，但我不想在其中添加额外的数据。@opticon您可以使用唯一id，它将为您提供灵活性和轻松的代码维护。否则，将父对象传递给子对象就太过分了
<div ng-controller="DialogDemoCtrl">
          <div class="span5 article-tree">
          <div ng-style="{'overflow': 'auto'}">

            <script type="text/ng-template"  id="tree_item_renderer">
              <span>
                 {{showNode(data)}} 
              </span>
             <button ng-click="removeItem(data)">Remove me!</button>
              <li ng-repeat="data in data.nodes" class="parent_li"  ng-include="'tree_item_renderer'" tree-node></li>
              </ul>
            </script>

            <div class="tree well">
          <ul>
            <li ng-repeat="data in displayTree"  ng-include="'tree_item_renderer'"></li>
          </ul>
        </div>
      </div>
    </div>
</div>

angular.module('plunker', ['ui.bootstrap'])
.controller('DialogDemoCtrl', function ($scope, $http) {

     buildEmptyTree();   


    function removeFromTree(parent, childNameToRemove){
      console.log(parent);
           parent.nodes = parent.nodes.filter(function(child){ 
             return child.name !== childNameToRemove;
           }).map(function(child){ 
              return removeFromTree(child, childNameToRemove);
           });
    return parent;
   }


    $scope.removeItem = function(item){
       $scope.displayTree[0] = removeFromTree( $scope.displayTree[0], item.name);
    }        

 function buildEmptyTree() {

        $scope.displayTree =
            [{
            "name": "Root",
            "type_name": "Node",
            "show": true,
            "nodes": [{
                "name": "Loose",
                "group_name": "Node-1",
                "show": true,
                "nodes": [{
                    "name": "Node-1-1",
                    "device_name": "Node-1-1",
                    "show": true,
                    "nodes": []
                }, {
                    "name": "Node-1-2",
                    "device_name": "Node-1-2",
                    "show": true,
                    "nodes": []
                }, {
                    "name": "Node-1-3",
                    "device_name": "Node-1-3",
                    "show": true,
                    "nodes": []
                }]
            }, {
                "name": "God",
                "group_name": "Node-2",
                "show": true,
                "nodes": [{
                    "name": "Vadar",
                    "device_name": "Node-2-1",
                    "show": true,
                    "nodes": []
                }]
            }, {
                "name": "Borg",
                "group_name": "Node-3",
                "show": true,
                "nodes": []
            }, {
                "name": "Fess",
                "group_name": "Node-4",
                "show": true,
                "nodes": []
            }]
        }];
        [{
            "name": "Android",
            "type_name": "Android",
            "icon": "icon-android icon-3",
            "show": true,
            "nodes": []
        }];
    }        
});