Accessing ng-click when rendered via $sce.trustAsHtml

Question

How do i get access to the ng-click function (updateRating) in the below?

https://jsfiddle.net/by2jax5v/171/

I'm using $sce.trustAsHtml to render $scope.content

$scope.bindHTML = $sce.trustAsHtml($scope.content);

Answer 1

Your above code does get compiled but it is sanitized by angular js considering an anchor tag as insecure, therefore ng-click does not work.

what you want to achieve can be achieved by using ng-html-compile by francis bouvier instead of ng-bind-html. It the thinnest library i have seen just 1kb. https://github.com/francisbouvier/ng_html_compile

also refer to https://stackoverflow.com/a/41790235

Answer 2

As it's not $compiled. so it doesn't tell Angular to search through that HTML and compile directives within it. You will have to use custom directive for this.

Updated fiddle.

var myApp = angular.module('myApp', []);

myApp.controller('MyCtrl', function($scope) {   

    $scope.content = "This text is <em>html capable</em> meaning you can have <a ng-click='updateRating(1)' href=\"#\">all</a> sorts <b>of</b> html in here.";
    $scope.updateRating = function(message) {
        alert(message);
    }

});

myApp.directive('compile', ['$compile', function ($compile) {
    return function(scope, element, attrs) {
      scope.$watch(
        function(scope) {
          // watch the 'compile' expression for changes
          return scope.$eval(attrs.compile);
        },
        function(value) {
          // when the 'compile' expression changes
          // assign it into the current DOM
          element.html(value);

          // compile the new DOM and link it to the current
          // scope.
          // NOTE: we only compile .childNodes so that
          // we don't get into infinite loop compiling ourselves
          $compile(element.contents())(scope);
        }
    );
  };
}]);