问题描述
我正在开发一个表单构建器,我的应用程序需要拖放功能。我正在为可放置区域使用自定义指令,并为 eventlistner 使用双向数据绑定。但问题是我无法使用 ng-repeat 从 eventlistener 内的数组渲染数据。我通过在 eventlistner 之外输入一个示例数组进行检查,它运行良好。有人可以帮我吗?
app.directive("droppable",function () {
return {
restrict: "EA",scope: {
contents: "=ngModel",},template: ` <div class="element-divs" ng-repeat="element in elements track by $index">
{{element}}</div>`,link: function (scope,element) {
var el = element[0];
if(!Array.isArray(scope.elements) )scope.elements= [];
el.addEventListener("dragover",function (e) {
if (e.preventDefault) e.preventDefault();
});
el.addEventListener("drop",function (e) {
var item = document
.getElementById(e.dataTransfer.getData("Text"))
.cloneNode(true);
if (item.id == "email-Box") {
var email = document.createElement("input");
email.type = "email";
email.className = "emailer";
scope.elements.push(email);
}
else if (item.id == "text-Box") {
var text = document.createElement("input");
text.type = "text";
text.className = "texter";
scope.elements.push(text);
}
console.log(scope.elements);// this logs an array in which everytime drop happens an element is added.
});
},};
});
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)