从数据库

Question

我正在构建一个应用程序的超级特定问题。

Angular Code：

 $scope.step1 = function ()
{
    console.log("step1");
   var columnDirective = '<ee-col object-ref1="Column1Clicked" object-ref2="Column2Clicked"></ee-col>';
   var container = document.getElementById("container");
   var angElement = angular.element(container);

   angElement.html("");
   angElement.append($compile(columnDirective)($scope));
};
$scope.step2 = function ()
{
    console.log("step2");
   var imageDirective = '<ee-img object-ref1="ImageRef1" ></ee-img>';
   var container = document.getElementById("col2");
   var angElement = angular.element(container);

   angElement.html("");
   angElement.append($compile(imageDirective)($scope));
};
$scope.step3 = function (){
console.log("step3");
var myImg ='<img src="https://www.dropbox.com/s/4ztbvr93gb3kllo/testcard.jpg?dl=1"/>'
 var container = document.getElementById("ImagePlaceholder");
   var angElement = angular.element(container);

   angElement.html(myImg);
};

 $scope.step4 = function (){
 console.log("step4");
  var container = document.getElementById("container");
   var angElementContainer = angular.element(container);

 var copied = document.getElementById("copied");
   var angElementCopied = angular.element(copied);

   angElementCopied.html(angElementContainer.html());
};

基本上我有一个编辑器，我可以将指令拖放到容器中，其中一些指令本身就是容器

我创建了一个小提琴来说明这个问题（不使用拖放） https://jsfiddle.net/starkx/jehLd5og/

Step1：我将column指令添加到容器div中。我的column指令有两个单元格，当你点击它们时，你可以看到控制台中每个单元格的点击事件

步骤2：模拟将图像指令（具有imageContainer）拖动到右侧单元格中。现在，当您在此单元格中单击时，您将从image指令获取click事件，而左侧单元格仍显示列单击事件

Step3：模拟将图像拖入imageContainer。点击事件仍然有效

在我的应用程序中，我现在处于保存此信息的位置，随后重新加载此页面将从数据库中提取此数据。

我在Step4中通过将容器div的内容复制到复制的div来进行模拟。

在这个复制的代码中，ng-clicks不起作用，你没有控制台输出。我已经尝试编译这个“复制”代码，但我无法在步骤（1-3）中获得原始内容，以便与“复制”div中的代码同时工作。

这就是这个问题的本质，我的google-fu让我失望了，而且我正在成为角度编码的相对初学者。

（注意：这个小提琴的设计不是为了让你可以毫不费力地点击这些步骤。它们必须按顺序完成，只需要一次。这也是一个非常简化的例子，因为它也可以在每个范围内嵌套列指令其它）

感谢任何帮助

编辑：我已经添加了第5步来编译复制的代码，但是当调用ng-click方法时，它们的参数在复制的部分中作为“未定义”传递。