AngularJS - Clone element with functionality

Question

I have a directive in which I want to clone a DOM element that they are exactly the same with all bindings. That when one of them changes, the other one changes as well. Is that possible? I understand I somehow have to compile the copied element but are they interconnected with the changes then?

angular.module('app').directive('test', function ($compile) {
  return {
  restrict: 'A',
  link: function (scope, element, attrs) {

   angular.element(document).ready(function () {

      var $header = angular.element(XXX).clone();
      // $compile($header)(scope); // not sure about this one. it doesn't work
      var $newHeader = angular.element(YYY).append($header);

    }
  }
});

Stephane Janicaud · Accepted Answer · 2017-03-22 12:50:41Z

2

Here is a small example on how to achieve this.

This example use a controller with a displayContent method that display content of an element on click.

We search inside the div element with test directive the existing <p> element with ng-click directive, clone it, change its content and append it to our div parent element.

Before appending this element copy, it needs to be compiled so that Angular will recognize its bindings.

index.html

<!doctype html>

<html lang="en" ng-app="app">
<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
  <script src="script.js"></script>
</head>

<body ng-controller="SampleController as ctrl">     
    <div test>
        <p ng-click="ctrl.displayContent($event)">Dummy</div>
    </div>
</body>
</html>

script.js

angular.module('app', []);

angular.module('app').controller('SampleController', function ($scope) {

    var ctrl = this;

    ctrl.displayContent = function($event) {
        alert($event.currentTarget.innerHTML);
    }     

});

angular.module('app').directive('test', function ($compile) {
  return {
      restrict: 'A',
      link: function (scope, element, attrs) {

           // Find <p> element inside our elment with `test` directive
           var pElement = element.find('p');
           // Clone <p>
           var pElementCopy = pElement.clone();
           // Change its content
           pElementCopy.html("Foo");
           // In order ng-click to work on this copy, you must compile it
           // If you remove the following line, then ng-click won't work
           $compile(pElementCopy)(scope);

           element.append(pElementCopy)
      }
    }
});

Link to the plunker : https://plnkr.co/edit/T4elaGJMgMtxX6bKJHf0?p=preview

edited Mar 22, 2017 at 12:50

answered Mar 22, 2017 at 12:41

Stephane Janicaud

3,7051 gold badge16 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

alobeejay Over a year ago

Thanks for your answer. Do I need an extra controller for this? When I only use have the directive I get a JS error with the $compile function: TypeError: Cannot read property '$render' of undefined

Stephane Janicaud Over a year ago

No the SampleController is only here for demo purposes. You can remove it and replace child p tag with <p another-directive>Dummy</div>. ` another-directive` could be a directive which for example display a tooltip.

Collectives™ on Stack Overflow

AngularJS - Clone element with functionality

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related