Javascript Create指令将每个列表元素包装在引导面板中,并带有删除、重新排序和#x2026的控件;
我有一个angularjs应用程序,它为相同结构的复杂对象列表生成表单。我编写指令来创建编辑它们所需的html 所以它基本上只是一个Javascript Create指令将每个列表元素包装在引导面板中,并带有删除、重新排序和#x2026的控件;,javascript,angularjs,twitter-bootstrap,angularjs-ng-repeat,Javascript,Angularjs,Twitter Bootstrap,Angularjs Ng Repeat,我有一个angularjs应用程序,它为相同结构的复杂对象列表生成表单。我编写指令来创建编辑它们所需的html 所以它基本上只是一个 <div ng-repeat="element in elements"> <div element-directive="element"></div> </div> 但是,我现在想添加对列表“elements”中的每个元素进行重新排序和删除的可能性(并可以选择添加新的元素) 因为我不想一次又一次地为
<div ng-repeat="element in elements">
<div element-directive="element"></div>
</div>
但是,我现在想添加对列表“elements”中的每个元素进行重新排序和删除的可能性(并可以选择添加新的元素)
因为我不想一次又一次地为每种类型实现控制和逻辑,所以我编写了一个指令“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>
(有关完整示例,请参见)
因此,它已经将html封装在引导面板中的ngRepeat中,带有用于删除元素的按钮和用于ui可排序的拖拽
但是,我一直在实现delete按钮的功能。ng repeat中的所有html都使用“原始”范围,因此在repeatPanels指令的范围内定义函数将不起作用:-(
对于ui sortable,我也不确定是否只是简单地将ui sortable和ng模型属性添加到原始ng repeat节点工作的父元素,或者是否还有更多工作要做
有人能给我指出正确的方向吗
谢谢
Florian首先,您需要$compile自定义模板:
$compile(element.contents())(scope);
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);
}
现在,内部模板已绑定到隔离范围,因此我将ng repeat移动到自定义模板中:
$compile(element.contents())(scope);
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);
}
例如,调用持久层
在这里