javascript - Angular 嵌套重复，如何检查向下的层数(防止超过 x 层的重复)

Question

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

这是 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

因此，如果有人遇到这个问题，我已经设计了一个解决方案。或者 - 如果有任何其他和/或更好的方法可以做到这一点，那么很高兴听到他们的声音!

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

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

然后在 Controller 中，我像这样从 drop 回调中调用模型

 $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 。我在 ui 上的 ng-repeat 上使用它，并使用拖放插件的 dnd-allowed-types 像

 dnd-allowed-types="list.allowedTypes"

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