将行内容转换为指令后，无法将 children 与 angular ui-sortable 一起拖动

Question

我有行列表，每一行中都有单元格 (children)。两行和 children 都可以拖动。

我用下面的代码实现了：

<div ui-sortable ng-model="rows">

    <div ng-repeat="row in rows track by row.id" 
    class="row connector" 
    ui-sortable="sortOptions" 
    ng-model="row.children">
         <div>{{row.name}}</div>
        <div ng-repeat="child in row.children track by child.id"  class="col-3">
            <div class="widget">{{child.name}}</div>
        </div> 
    </div>

</div>

但是，我想在它自己的指令和控制器中移动行表示和逻辑。（控制器与本例无关，因此我跳过了它的源代码）

myapp.directive('block', function() {
  return {
    restrict: 'E',
    template: '' +
      '<div>{{row.name}}</div>' + 
        '<div ng-repeat="child in row.children track by child.id" class="col-3">' +
          '<div class="widget">{{child.name}}</div>' +
        '</div>',
    scope: {
      row: '='
    },
    link: function(scope) {
      console.log('row ', scope.row)
    }
  }
});

并将模板更改为：

<div ui-sortable ng-model="rows">

    <div ng-repeat="row in rows track by row.id" 
    class="row connector" 
    ui-sortable="sortOptions" 
    ng-model="row.children">

        <block row="row"></block>
    </div>

</div>

问题是我不能再拖动 children，只能拖动行。我找不到这个坏的原因。

完整示例如下：https://output.jsbin.com/zuxovod

Answer 1

是的，您的 HTML 结构不正确。请检查此 runnable demo。您错过了 DOM 结构中的某些元素以使其正常工作。还要确保在指令中使用 replace: true 以确保良好的 DOM 结构，这是使可排序运行.

所必需的

查看

<div ui-sortable ng-model="rows">
  <div ng-repeat="row in rows track by row.id" 
       class="row connector"
       ng-model="row.children">
    <block row="row" sort-options="sortOptions"></block>
  </div>
</div>

指令：

myapp.directive('block', function() {
  return {
    restrict: 'E',
    replace: true, 
    template: '<div><div>{{row.name}}</div>' + 
        '<div ui-sortable ng-model="row.children" class="connected"><div ng-repeat="child in row.children track by child.id" class="col-3">' +
          '<div class="widget">{{child.name}}</div>' +
        '</div></div></div>',
    scope: { 
      row: '=',
      sortOptions: '='
    },
    link: function(scope) {
      console.log('row ', scope.row)
    }
  }
});

将行内容转换为指令后，无法将 children 与 angular ui-sortable 一起拖动

Can't drag children with angular ui-sortable after converting the row content to directive

jquery-ui-sortable

angularjs

angular-ui-sortable

查看

指令：