Angular嵌套重复，如何检查下了多少层(防止超过x层的重复)

Question

我有一些嵌套的ng-repeat使用角拖放指令(https://github.com/marceljuenemann/angular-drag-and-drop-lists)，我试图寻找一种方法来阻止用户在超过3个级别拖动。所以我可以用他们的掉落回调来做到这一点，但是我不确定如何访问我在重复中有多少个级别的信息。

这是HTML

<div class="col-sm-6 nestedDemo">
        <script type="text/ng-template" id="list.html">
            <ul dnd-list="list"  dnd-drop="dropCallback(event, index, item, external, type)">
                <li ng-repeat="item in list" dnd-draggable="item" dnd-effect-allowed="move" dnd-moved="list.splice($index, 1)" ng-include="item.dragType + '.html'">
                </li>
            </ul>
        </script>
        <script type="text/ng-template" id="unit.html">
            <div class="container-element box box-blue">
                <h3>Unit</h3>
                <div class="col-sm-12" ng-repeat="list in item.subModules" ng-include="'list.html'" ></div>
                <div class="clearfix"></div>
            </div>
        </script>
        <script type="text/ng-template" id="module.html">
            <div class="item">{{item.result.name}}</div>
        </script>
        <h3>Selected Modules</h3>
        <div class="eit-card col-xs-12">
            <div class="col-md-12">
                <div ng-repeat="(zone, list) in templateStructure">
                    <div class="dropzone box">
                        <div ng-include="'list.html'"></div>
                    </div>
                </d>v>
            </div>
        </div>
    </div>

主要的问题是与unit.html -我不希望它允许另一个单位能够被拖动到它，如果它是第三层的单位(s)。

我试图使用dnd-drop="dropCallback()来访问被删除的项目，但它没有当前重复级别(或访问$parent)的指示。我也试过这样做

  <div class="col-sm-12" ng-repeat="list in item.subModules" ng-include="'list.html'"ng-if="checkUnitLevel(item)"></div>

 $scope.checkUnitLevel = function(item) {
   //if has 3 parents return false?
   console.log(item);
  }

日志似乎没有着火，所以我认为我对此有不正确的逻辑。我可能处理得不正确。任何建议或帮助将不胜感激。谢谢!

Answer 1

所以如果有人遇到这个问题，我已经设计了一个解决方案。或者，如果有其他更好的方法来做到这一点，那就太好了!

我使用了拖放库内置的拖放回调

<my-html-element dnd-drop="dropCallback(event, index, item, external, type)" >

然后在控制器中我像这样调用模型从拖放调用返回

 $scope.dropCallback = function dropCallback(event, index, item, external, type) {
            setTimeout(function() {
                $scope.templateStructure.checkLevels();
            }, 500);
            return item;
        };

$scope.templateStructure是模型的当前实例。我唯一不喜欢的是，我必须花费时间，这样我才能首先返回项目，这样它就可以在列表中，这样我就可以检查级别。

模型上的函数是这样的。

  function checkLevels() {
                function checkForUnits(unit) {
                    if (unit.dragType === 'unit') {
                        unit.allowedTypes = ['unit', 'module'];
                        return unit;
                    }
                }
                function checkIfUnit(item) {
                    if (item.dragType === 'unit') {
                        item.allowedTypes = ['module'];
                    }
                }
                function tooDeep(level) {
                    return function(nodes) {
                        if (level === 2) {
                            checkIfUnit(nodes);
                        } else if (level >= 1) {
                            _.map(_.filter(nodes.subModules[0], checkForUnits), tooDeep(level + 1));
                        } else {
                            _.map(_.filter(nodes, checkForUnits), tooDeep(level + 1));
                        }
                    };
                }
                tooDeep(0)(this.template);
            }

所以你可以看到我交换unit.allowedTypes取决于它在列表中的深度。我在我的ng-repeat界面上使用拖放插件的dnd-allowed-types，如

 dnd-allowed-types="list.allowedTypes"

这对我来说似乎很有效。我当然愿意接受批评或建议!我讨厌回答我自己的问题，但也许有人也会遇到这个问题，希望这能有所帮助。谢谢!