如何在角度拖放列表中获取父节点信息

时间:2018-04-07 14:09:26

标签: jquery angularjs

我试图创建一个任何人都可以拖放,排序的环境。 人可以将卡放入任何其他卡,也可以从任何卡中拖出卡,但为了这样做,我将不得不知道父卡信息。我查看了所有文档,但没有找到任何选项来获取卡片所在的卡片信息。

<ul dnd-list="containers"
dnd-allowed-types="['container']"
dnd-external-sources="true"
dnd-dragover="dragoverCallback(index, external, type, callback)"
dnd-drop="dropCallback(index, item, external, type)">
<li ng-repeat="container in containers"
    dnd-draggable="container"
    dnd-type="'container'"
    dnd-effect-allowed="copyMove"
    dnd-moved="containers.splice($index, 1)"
    dnd-callback="container"  id="{{container}}" ng-model="container">
    <div class="container-element box box-blue">
        <h3>Container (effects allowed: {{container.effectAllowed}})</h3>
        <ul dnd-list="container.items"
            dnd-allowed-types="['item']"
            dnd-horizontal-list="true"
            dnd-external-sources="true"
            dnd-effect-allowed="{{container.effectAllowed}}"
            dnd-dragover="dragoverCallback(index, external, type,callback)"

            dnd-drop="dropCallback(index, item, external, type)"
            dnd-inserted="logListEvent('inserted at', index, external, type)"
            class="itemlist">
            <li  ng-repeat="item in container.items"
                dnd-draggable="item"
                dnd-type="'item'"
                dnd-callback="item"
                dnd-effect-allowed="{{item.effectAllowed}}"
                dnd-dragstart="logEvent('Started to drag an item')"
                dnd-moved="container.items.splice($index, 1)"
                dnd-dragend="draged(event, dropEffect)" id="{{item}}" ng-model="item">
                {{item.label}}
            </li>
        </ul>
        <div class="clearfix"></div>
    </div>
</li>

任何帮助将不胜感激。

1 个答案:

答案 0 :(得分:0)

如果您展示代码,那将是最好的。

我假设您正在讨论父组件与子组件之间的通信。

你可以用:

  1. 活动:$ scope.broadcast(父级到底部)或发布(儿童用户)活动。

  2. 绑定到父属性 - 读取指令定义对象中的“bindToController”属性(当child是元素指令时使用)。

  3. 有更多的方法,例如在一个属性上使用$ scope。$ watch或使用共享服务,但我会坚持上面提到的2。

    编辑: 在您的示例中,我看到您正在使用第三方指令。

    不确定您希望如何使用父级数据,但请注意,对于每个“项目”(内部ng-repeat),“容器”范围(他的父级)可用,您可以直接在标记中访问它,并将其传递给“item”的相关属性。