我有一个 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>
(完整示例请参见 this Plunker )
所以它已经将 html 包装在 Bootstrap 面板内的 ngRepeat 内,并带有用于删除元素的按钮和用于 ui-sortable 的可拖动元素。
但是,我一直坚持实现删除按钮的功能。 ng-repeat 内的所有 html 都使用“原始”范围,因此在 RepeatPanels 指令范围内定义函数将不起作用:-(
对于 ui-sortable,我也不确定是否简单地将 ui-sortable 和 ng-model 属性添加到原始 ng-repeat 节点的父元素中,或者是否还有更多工作要做......
有人可以为我指明正确的方向吗?
谢谢!
弗洛里安
最佳答案
首先您需要 $compile 您的自定义模板:
$compile(element.contents())(scope);
现在,您的内部模板已绑定(bind)到隔离范围,因此我将 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-repeat 时失去了一些灵 active 。
另一个成本是外部作用域不再直接与隔离作用域通信,因此您可能需要创建如下事件:
scope {
onDelete: '&'
}
例如,调用持久层。
Plunkr在这里。
关于javascript - 创建指令,将每个列表元素包装在 Bootstrap 面板内,并带有删除、重新排序等控件。,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25703911/