Question

我有一些嵌套的ng-repeats使用角度拖放指令（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 - 如果它是单位的第三级，我不希望它允许其他单位被拖入其中。

我试图使用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

因此，如果有人遇到这个问题，我已经设计了一个解决方案。或者 - 如果有任何其他和/或更好的方法，那么听听他们会很棒！

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

<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。我使用拖放插件dnd-allowed-types喜欢

在ui上重复使用它

 dnd-allowed-types="list.allowedTypes"

这对我来说似乎很有用。我当然乐于接受批评或建议！我讨厌回答我自己的问题，但也许有人会遇到这个问题，这将有希望帮助。谢谢！

角度嵌套重复，如何检查多少级别（防止超过x级重复）

1 个答案: