创建指令，该指令将每个列表元素包装在引导面板中，并带有删除、重新排序…的控件…

Create directive that wraps each list element inside a bootstrap panel with controls to delete, reorder, …

本文关键字：指令 新排序 删除 排序 控件 列表元素 包装 创建      更新时间：2023-09-26

我有一个angularjs应用程序，它为相同结构的复杂对象列表生成表单。我编写了指令来创建编辑它们所需的html。

所以它基本上只是一个

<div ng-repeat="element in elements">
    <div element-directive="element"></div>
</div>

然而，我现在想添加重新排序和删除列表"元素"中的每个元素的可能性（并可选地添加新的元素）

因为我不想一次又一次地为每种类型实现控制和逻辑，所以我写了一个指令"repeatPanels"，应该与ngRepeat一起使用。

<div ng-repeat="element in elements" repeatPanels="elements">
    <div element-directive ng-model="element">
</div>

将html转换为

<div ng-repeat="element in elements" repeat-panels="elements"><div class="panel panel-default">
  <div class="panel-heading">
    <div class="panel-title">
      <div class="btn-group pull-left"><button class="btn btn-sm btn-default"><span class="glyphicon glyphicon-move"></span></button></div>
      <div class="btn-group pull-right"><button ng-click="removeElement($index)" class="btn btn-sm btn-danger"><span class="glyphicon glyphicon-remove"></span></button></div></div><div class="clearfix"></div>
    </div>
    <div class="panel-body">
      <div element-directive ng-model="element">
    </div>
  </div>
</div>
<div ng-repeat="element in elements" repeat-panels="elements"><div class="panel panel-default">
  <div class="panel-heading">
    <div class="panel-title">
      <div class="btn-group pull-left"><button class="btn btn-sm btn-default"><span class="glyphicon glyphicon-move"></span></button></div>
      <div class="btn-group pull-right"><button ng-click="removeElement($index)" class="btn btn-sm btn-danger"><span class="glyphicon glyphicon-remove"></span></button></div></div><div class="clearfix"></div>
    </div>
    <div class="panel-body">
      <div element-directive ng-model="element">
    </div>
  </div>
</div>

（参见本Plunker）完整示例）

因此，它已经将html封装在引导面板中的ngRepeat中，其中包含用于删除元素的按钮，以及用于ui排序的draggable。

然而，我一直在实现删除按钮的功能。ng repeat中的所有html都使用"原始"作用域，因此在repeatPanels指令的作用域中定义函数将不起作用：-（

对于ui可排序，我也不确定简单地将ui可排序和ng模型属性添加到原始ng重复节点的父元素是否有效，或者是否还有更多的工作要做…

有人能给我指明正确的方向吗？

谢谢！

Florian

首先，您需要$编译您的自定义模板：

$compile(element.contents())(scope);

现在，您的内部模板已绑定到您的隔离范围，所以我将ng repeat移到自定义模板中：

link: function (scope, element, attrs) {
        var panelHeadingHtml = '<div  class="panel-heading">' +
            '<div class="panel-title">' +
            '<div class="btn-group pull-left">' +
            '<button class="btn btn-sm btn-default"><span class="glyphicon glyphicon-move"></span></button>' +
            '</div>' +
            '<div class="btn-group pull-right">' +
            '<button ng-click="removeElement($index)" class="btn btn-sm btn-danger"><span class="glyphicon glyphicon-remove"></span></button>' +
            '</div>' +
            '</div>' +
            '<div class="clearfix"></div>' +
            '</div>';
        element.wrapInner('<div ng-repeat="element in repeatPanelsElements"  class="panel panel-default"><div class="panel-body"></div></div>');
        element.find(" > .panel").prepend(panelHeadingHtml);
        $compile(element.contents())(scope);
    }

这将html更改为：

<div class="element" repeat-panels="elements">

这样做的一个代价是，您在实现ng重复时失去了一些灵活性。

另一个代价是外部作用域不再直接与隔离作用域通信，因此您可能需要创建以下事件：

scope {
    onDelete: '&'
}

例如，调用持久性层。

Plunkr在这里。

相关文章：