Javascript 初始化动态添加的可编辑字段

我正在尝试在dropzone.js thumnail部件中添加动态可编辑字段？现在我知道动态添加的可执行字段是初始化的。我正在试

小提琴：

代码：

$scope.addfield=function（）
{
jQuery（'.dropzone'）.append（''）；
};

---

单击add Xeditable field（添加可编辑字段）后，会添加一个新字段，但它不会初始化。

您不应该使用

jQuery

添加新的可编辑元素。利用angular的范围和消化机制。首先，我们需要一个数组作为模型，您应该在DOM中迭代并动态添加新的

可编辑文本

指令元素，让angular在正确的时间完成其工作并编译新添加的指令

请参阅下面的一些代码片段，这些代码片段可能会给您一个开始：

JS:

// Holds your collection model.
$scope.items = [];

// [...]

var addNewItem = function() {
    $scope.items[$scope.items.length] = { name: 'name' + new Date().getTime(), label: 'New Label' };
}

// [...]

$scope.addfield = function() {
    //jQuery('.dropzone').append('<a href="#" editable-text="user.name" onbeforesave"updateUser()">KKKKKKKKKK</a>'); => don't do it this way!
    addNewItem();
};

<div action="/file-upload" class="dropzone" id="my-awesome-dropzone">
    <a class="spacer" href="#" ng-repeat="item in items" ng-bind="item.label + '-' + $index" editable-text="item.name" onbeforesave="updateUser()"></a>
</div>

//保存您的集合模型。
$scope.items=[]；
// [...]
var addNewItem=函数（）{
$scope.items[$scope.items.length]={name:'name'+new Date（）.getTime（），label:'new label'}；
}
// [...]
$scope.addfield=函数（）{
//jQuery（'.dropzone'）.append（''）；=>不要这样做！
addNewItem（）；
};

HTML:

// Holds your collection model.
$scope.items = [];

// [...]

var addNewItem = function() {
    $scope.items[$scope.items.length] = { name: 'name' + new Date().getTime(), label: 'New Label' };
}

// [...]

$scope.addfield = function() {
    //jQuery('.dropzone').append('<a href="#" editable-text="user.name" onbeforesave"updateUser()">KKKKKKKKKK</a>'); => don't do it this way!
    addNewItem();
};

<div action="/file-upload" class="dropzone" id="my-awesome-dropzone">
    <a class="spacer" href="#" ng-repeat="item in items" ng-bind="item.label + '-' + $index" editable-text="item.name" onbeforesave="updateUser()"></a>
</div>

---

看看这个工作。

我不能从控制器插入，因为我需要用dropzone缩略图添加它。在成功事件中，我附加了可编辑字段，所以我如何初始化它们，myDropzone.on（“成功”，函数（文件，响应）{file.previewElement.appendChild（“”；}）；