0

I have a super specific issue with an app I'm building.

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());
};

Basically I have an editor where I can drag/drop directives into a container and some of these directives themselves are containers

I have created a fiddle to illustrate this issue (does not use drag/drop) https://jsfiddle.net/starkx/jehLd5og/

Step1: I add my column directive to a container div. My column directive has two cells and you can see the click events for each of these cells being raised in the console as you click around them

Step2: simulates dragging an image directive (this has an imageContainer) into the right hand cell. now when you click in this cell you get the click event from the image directive, whereas the left hand cell still shows the column click event

Step3:simulates dragging an image into the imageContainer. the click events all still function

In my application I am now at a position where I would save this information and a subsequent reload of this page would pull this data from the database.

I am simulating this in Step4 by copying the contents of the container div to the copied div.

In this copied code the ng-clicks do not work and you get no console output. I have tried compiling this 'copied' code but I have not been able to get the original stuff in steps (1-3) to work at the same time as the code in the 'copied' div.

Such is the nature of this issue that my google-fu has let me down somewhat and I'm suffering from being a relative beginner at angular coding.

(note: the fiddle is not designed so that you can click the steps willy-nilly. they must be done in order and once only. This is also a very simplified example as it is also possible to nest column directives within each other)

any help gratefully received

Edit: I have added a 5th step to $compile the copied code, but whilst the ng-click methods get called, their parameter is passed as 'undefined' in the copied section.

Stuart Mackenzie
  • 1
  • 2
  • Hi Stuart, will try checking out your code in a bit here but just wanted to leave my initial 2 cents. I have done something similar with a drag and drop editor that I then save to a DB and restore later. The way I went about it is by coding the data objects as plain old javascript objects, those hold whatever contents are typed in or image source or other properties of the objects I need to save, each container type one has an array of other objects in the order they should stack. Long story short once you have the POJOs you can stringify them to save and parse to restore. – shaunhusain Sep 29 '16 at 09:20
  • If in using the data structure to build the view you want to have directives processed you would need to run the generated code through $compile, in my case each one of the plain javascript objects has a function called "html()" that i defined to generate the HTML for that object, for containers their html() function cascades to calling the html() function for each of the children. – shaunhusain Sep 29 '16 at 09:22
  • Cheers, I've added a 5th step in the fiddle to $compile but now have an issue with the parameter for the ng-click being undefined. Fiddle updated – Stuart Mackenzie Sep 29 '16 at 10:02

0 Answers0