AngularJS : How to bind an event to a dynamically generated html with ng-bind-html

Question

I am working on a custom AngularJS directive. How to bind an event to the dynamically generated html which is generated by the directive itself. Upon research I found that we need to use $watch and $compile, but I couldn't get it working. I found this answer relevant to my question. What is the alternative for jQuery ON in AngularJS

Any help is greatly appreciated. Please check this out in plunker

app.directive( 'btn', [ '$sce', function( $sce ){ 
return { 
    restrict: 'E',
    replace: true,
    template: '<div ng-bind-html="buttonHtml"></div>',
    link : function ($scope, element, attrs) {
    $scope.buttonHtml = $sce.trustAsHtml('<button ng-click="showMessage()">Click Me</button>');
    $scope.showMessage = function () {
        alert("You clicked Me");
  }
} }; }]);

Thanks in advance

Could you post the code you tried already using $watch and $compile, which you couldn't get to work? — Michael Bromley
– Michael Bromley, Commented Aug 26, 2014 at 8:59
Could you show what you've got so far, it'd be easier to help you. — Wawy
– Wawy, Commented Aug 26, 2014 at 8:59
@MichaelBromley Please wait. I will edit my question my question with code samples — Vishnu Sureshkumar
– Vishnu Sureshkumar, Commented Aug 26, 2014 at 9:02
@vishnu if you are able to post your code in plnkr.co that would be useful. — Jai
– Jai, Commented Aug 26, 2014 at 9:04

Jai · Accepted Answer · 2014-08-26 10:02:14Z

3

I hope this would do like this way:

app.directive('yourcustomdirective', function(){
  return {
    restrict : "E", //<---E is directive like <customdirective></customdirective>
    replace : true,
    template:"<button>Click me.</button>", // <---dynamically generated button
    link:function(scope, element, attrs){
      element.on('click', function(){ // <-----click event bound 
        alert(scope.greet); // <----alerts the greet in the scope
      });
    }
  };
});

Demo Plunkr.

Demo Plunkr with ng-click.

edited Aug 26, 2014 at 10:02

answered Aug 26, 2014 at 9:13

Jai

74.8k12 gold badges77 silver badges104 bronze badges

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

13 Comments

Vishnu Sureshkumar Over a year ago

I have an ng-click associated with this button. How to make that ng-click work.

Jai Over a year ago

@vishnu do make a function in the scope of controller and access that.

Vishnu Sureshkumar Over a year ago

Thanks for your help. I need that doGreet() function also inside the directive not in the controller.

Vishnu Sureshkumar Over a year ago

The problem is while using ng-bind-html. The event is not getting triggered for the dynamic content. Please check this out in plunker plnkr.co/edit/D5ll1mjzPVqbHHg2Tqb5

Jai Over a year ago

@vishnu you have jqlite available in angularjs you can use this element.find('button').on('click', callback);. Read about jQlite here...!

|

Collectives™ on Stack Overflow

AngularJS : How to bind an event to a dynamically generated html with ng-bind-html

1 Answer 1

Demo Plunkr.

Demo Plunkr with ng-click.

13 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

13 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related