call function inside $sce.trustAsHtml() string in Angular js

Question

I am developing an app using Angularjs and adding HTML using $sce.trustAsHtml() in my page. I want to call a function in above dynamically added content. My html and script as below.

HTML

<div ng-app="ngBindHtmlExample">
  <div ng-controller="ngBindHtmlCtrl">
   <p ng-bind-html="myHTML"></p>
  </div>
</div>

Javascript

angular.module('ngBindHtmlExample', ['ngSanitize'])

.controller('ngBindHtmlCtrl', ['$scope','$sce', function ngBindHtmlCtrl($scope, $sce) {
  $scope.myHTML =$sce.trustAsHtml(
     'I am an <code>HTML</code>string with <a href="#" ng-mouseover="removeExp()">links!</a> and other <em>stuff</em>');
  
    $scope.removeExp = function (){
       console.log('dfdfgdfgdfg');
    }
}]);

jsfiddle

Click Here to see

Daniel Tabuenca · Accepted Answer · 2013-11-30 09:08:06Z

47

It's a bit tricky because ng-bind-html will simply insert plain old html and not bother compiling it (so any directives in the html will not be processed by angular.

The trick is finding a way to compile whenever the template changes. For example, you could create a directive that does this. It would look something like:

.directive('compileTemplate', function($compile, $parse){
    return {
        link: function(scope, element, attr){
            var parsed = $parse(attr.ngBindHtml);
            function getStringValue() { return (parsed(scope) || '').toString(); }

            //Recompile if the template changes
            scope.$watch(getStringValue, function() {
                $compile(element, null, -9999)(scope);  //The -9999 makes it skip directives so that we do not recompile ourselves
            });
        }         
    }
});

You can then use it like this:

<p ng-bind-html="myHTML" compile-template></p>

See the working example here:

http://jsfiddle.net/3J25M/2/

answered Nov 30, 2013 at 9:08

Daniel Tabuenca

13.7k3 gold badges40 silver badges43 bronze badges

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

3 Comments

Ken Goodridge Over a year ago

This worked for me after a tweak. I am using it in an ionic app and it did not like function getStringValue(), only in the emulators mind you. I needed var getStringValue = function().

Faris Rayhan Over a year ago

Awesome dude. This helps me

Varun Sharma Over a year ago

Could anyone please see this link stackoverflow.com/questions/45713677/…

Collectives™ on Stack Overflow

call function inside $sce.trustAsHtml() string in Angular js

HTML

Javascript

jsfiddle

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

HTML

Javascript

jsfiddle

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related