AngularJS adding ng-click in directive

Question

AngularJS adding ng-click in directive

I'm implementing drag'n'drop directive. On drop I add a copy of element to my div and append ng-click attribute to it like this:

copy.append('<button class="close" ng-click="abc()">&times;</button>');

For example, in controller I have

$scope.abc = function () {
    alert('Hello!');
}

And it doesn't work. If I add this button on page manually it works fine.

javascript
jquery
angularjs
directive

Answer 1

copy.append('<button class="close" ng-click="abc()">&times;</button>');
$compile(copy)($scope);

Answer 2

I guess that you do need to compile your new template so that AngularJS recognizes it. The docs give you a good example for how to use ng.$compile.

Cloning can be done then like so:

var templateHTML = angular.element('<p>{{total}}</p>'),
    scope = ....;

var clonedElement = $compile(templateHTML)(scope, function(clonedElement, scope) {
  //attach the clone to DOM document at the right place
});