Question

我有行列表，在这一行的每一行都有单元格（子）。可以拖动行和子项。

我用以下代码实现了这个目标：

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

问题是我不能再拖动孩子，只能拖动行。我找不到破坏的原因。

以下是完整示例：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)
    }
  }
});

将行内容转换为指令后，无法使用角度ui-sortable拖动子项

1 个答案:

视图

指令：