use service function with ng-bind-html in AngularJS

Question

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 .

I would suggest the filter-based solution instead, which is pretty elegant: stackoverflow.com/a/19705096/1225328. — sp00m
– sp00m, Commented Sep 18, 2017 at 13:21
@sp00m What if I need to pass 2 arguments instead of one to the function? Let's say the text and another argument, can I still use a filter ? — aleroot
– aleroot, Commented Sep 18, 2017 at 13:27
I'm not sure I understand. Would you mind providing your actual code? — sp00m
– sp00m, Commented Sep 18, 2017 at 13:29

Sajeetharan · Accepted Answer · 2017-09-18 13:33:51Z

2

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>

edited Sep 18, 2017 at 13:33

answered Sep 18, 2017 at 13:19

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

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

2 Comments

aleroot Over a year ago

I have already injected the service inside the controller, I can use other functions inside the controller itself

Sajeetharan Over a year ago

use a common filter as above

Sachila Ranawaka · Accepted Answer · 2017-09-18 13:22:26Z

1

If you want to make this common, instead of using service, you can use a filter

.filter('convertHtml',function($sce){
  return function(text){
     return $sce.trustAsHtml(text);
 }
})


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

answered Sep 18, 2017 at 13:22

Sachila Ranawaka

41.6k8 gold badges62 silver badges87 bronze badges

2 Comments

aleroot Over a year ago

What if I need to pass two arguments to the function ? Can I still use a filter ? How can I call it then ?

Sachila Ranawaka Over a year ago

you can. check this stackoverflow.com/questions/16227325/…

Eliasib13 · Accepted Answer · 2017-09-18 13:23:42Z

0

From the AngularJS docs: https://docs.angularjs.org/api/ng/directive/ngBindHtml

If you inject ngSanitize to the module you're using you can just use ng-bind-html passing a string parameter whose value is HTML.

answered Sep 18, 2017 at 13:23

Eliasib13

611 silver badge4 bronze badges

Comments

Immanuel Kirubaharan · Accepted Answer · 2017-09-18 13:37:35Z

0

Can you have a look at this plnkr as you have a example code snippet I have with that plunker link

Sample Code:

app.controller('MainCtrl', ['$scope', 'MyReputationSrvc', function($scope, MyReputationSrvc) {
  $scope.positiveText = "Hello </br> <b>World</b>";
  $scope.MyReputation = function(repText){
    return MyReputationSrvc.highlightReview(repText);
  };
}]);

answered Sep 18, 2017 at 13:37

Immanuel Kirubaharan

1,1041 gold badge11 silver badges18 bronze badges

Collectives™ on Stack Overflow

use service function with ng-bind-html in AngularJS

4 Answers 4

2 Comments

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related