Angular ng-click not working with $compile

Question

I have code similar to the below code to trigger a click event in an Angular app. Why is not the event triggering?

var app = angular.module("myApp", [])

app.directive('myTop',function($compile) {
return {
    restrict: 'E',
    template: '<div></div>',
    replace: true,
    link: function (scope, element) {
        var childElement = '<button ng-click="clickFunc()">CLICK</button>';
        element.append(childElement);
        $compile(childElement)(scope);

        scope.clickFunc = function () {
            alert('Hello, world!');
        };
    }
}
})

Shashank Agrawal · Accepted Answer · 2015-12-10 09:11:37Z

7

Change your compile statement like this:

$compile(element.contents())(scope);

You were passing a DOM string childElement which is really not a DOM element instead it is a string. But the $compile needs the DOM element(s) to actually compile the content.

var app = angular.module("myapp", []);

app.directive('myTop', ['$compile',
  function($compile) {
    return {
      restrict: 'E',
      template: '<div></div>',
      replace: true,
      link: function(scope, element) {
        var childElement = '<button ng-click="clickFunc()">CLICK</button>';
        element.append(childElement);
        $compile(element.contents())(scope);

        scope.clickFunc = function() {
          alert('Hello, world!');
        };
      }
    }
  }
])

<html>

<body ng-app="myapp">
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
  <my-top></my-top>
</body>

</html>

edited Dec 10, 2015 at 9:11

answered Dec 10, 2015 at 9:03

Shashank Agrawal

25.9k11 gold badges98 silver badges126 bronze badges

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

1 Comment

Alejandro García Iglesias Over a year ago

If you read the usage documentation for $compile, you'll see it accepts a string. docs.angularjs.org/api/ng/service/$compile#usage

Collectives™ on Stack Overflow

Angular ng-click not working with $compile

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related