ng-click not working after compile ng-bind-html

Question

I have a directive

app.directive("dir", function($compile, $sce){
      return{
        restrict: "E",
        link: function(scope, element, attr){
          scope.$watch('content',function(){
            var html = $sce.trustAsHtml(attr.content);
            scope.alabala = $compile(html)(scope);
          },true);
        },
        template: "<div ng-bind-html='alabala'></div>",
      }
    });

a controller:

function MainController($scope, $http, customService, $location, $sce, $compile){
    $scope.init = function(){
        customService.get().success(function(data) {
                 var html = $sce.trustAsHtml(data);
                $("#dir").attr("content", data);

            });
    };
}

and on my index page I have:

<div id="div" ng-controller="MainController" class="pull-right span3" ng-init="init()">
      <dir id="dir" ></dir>
</div>

my custom service returns every time a different html containing for example

<button ng-click='click()'>Click me</button>

What I am trying to do is every time when I push a different value in the content of my directive to compile it and put it in my html and handle the click function from my controller. Because I'm new to AngularJS I have been struggling with this problem for sometime. Please help.

Tasnim Reza · Accepted Answer · 2014-01-27 06:52:09Z

26

You don't need to deal with $sce to meet your purpose.

You can pass your HTML as string to the directive. After compilation in the directive it'll work.

In HTML where you need the directive

<dir id="dir" content="myVal"></dir>

Set different value in myVal your controller

$scope.myVal = '<button ng-click=\'buttonClick()\'>I\'m button</button>'; // HTML as string

The directive

myApp.directive('dir', function($compile, $parse) {
    return {
      restrict: 'E',
      link: function(scope, element, attr) {
        scope.$watch(attr.content, function() {
          element.html($parse(attr.content)(scope));
          $compile(element.contents())(scope);
        }, true);
      }
    }
  })

Check the Demo

answered Jan 27, 2014 at 6:52

Tasnim Reza

6,0603 gold badges27 silver badges31 bronze badges

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

7 Comments

user1 Over a year ago

Thank you so much!!! Works perfect! In the way I wrote it is the $sce the problem or Im not passing it the right way to the directive?

Vishnu Sureshkumar Over a year ago

@Reza - Could you please explain what $watch and $compile doing here. Would be happy if you could explain your code.

Tasnim Reza Over a year ago

Here $watch used for automatic rendering, it listening directive's content value if content changed then it works. If you think your directive works only single time then you don't need $watch. Here $parse used for parsing the string content and $compile will link newly generated HTML with scope.

mila Over a year ago

@Reza Can you please tell me how to pass a templateUrl into $scope.myVal? Thanks!

Tasnim Reza Over a year ago

@mila Here $scope.myVal is used to pass HTML Content as string NOT url. If you need to load a template then use directive's templateUrl like docs.angularjs.org/guide/directive#template-expanding-directive

|

Collectives™ on Stack Overflow

ng-click not working after compile ng-bind-html

1 Answer 1

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related