[SOLVED] use service function with ng-bind-html in AngularJS

use service function with ng-bind-html in AngularJS

I'm trying to use a transformation function called highlightReview defined in a AngularJS service with the attribute ng-bind-html but I can't make it work.

See below for a sample :

function myReputationSrvc($http, $q, $log, $sce) {

    this.highlightReview = function(text) {
        return $sce.trustAsHtml(text);
    }
}

then in the HTML there is a call to that function like the following :

<span ng-bind-html = " MyReputationSrvc.highlightReview(review.positiveText) "> </span>

Nothing is called and no errors are thrown, it seems like that ng-bind-html is working just with functions or variables in the $scope context, since if I move the function to the $scope and then call it with ng-bind-html = "highlightReview(review.positiveText)" is working correctly.

Is there a way to use the function from the service? I've put the function in the service because I want to share this function among multiple controllers.

AngularJS version is : 1.6.5 .

Solution

You need to inject the service to your controller and place the function inside the controller, you cannot call the service function directly from the template.

Or you could have your own filter to do the job,

.filter('mysce',function($http, $q, $log, $sce){  
     return $sce.trustAsHtml(text);
});

<span ng-bind-html = "review.positiveText | mysce"> </span>