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: https://stackoverflow.com/a/19705096/1225328. — sp00m, Sep 18 '17 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, Sep 18 '17 at 13:27
I'm not sure I understand. Would you mind providing your actual code? — sp00m, Sep 18 '17 at 13:29

Sajeetharan · Accepted Answer · 2017-09-18T13:33:51.243

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 '17 at 13:33

answered Sep 18 '17 at 13:19

Sajeetharan

216,225
63
350
396

I have already injected the service inside the controller, I can use other functions inside the controller itself – aleroot Sep 18 '17 at 13:21
1

use a common filter as above – Sajeetharan Sep 18 '17 at 13:34
@Sajeetharan You saved ma life! :hugs: – jibiel Nov 22 '18 at 14:40

score 1 · Answer 2 · answered Sep 18 '17 at 13:22

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 '17 at 13:22

Sachila Ranawaka

39,756
7
56
80

What if I need to pass two arguments to the function ? Can I still use a filter ? How can I call it then ? – aleroot Sep 18 '17 at 13:26
1

you can. check this https://stackoverflow.com/questions/16227325/how-do-i-call-an-angular-js-filter-with-multiple-arguments – Sachila Ranawaka Sep 18 '17 at 13:27

score 0 · Answer 3 · answered Sep 18 '17 at 13:23

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 '17 at 13:23

Eliasib13

51
1
4

score 0 · Answer 4 · answered Sep 18 '17 at 13:37

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);
  };
}]);

use service function with ng-bind-html in AngularJS

4 Answers4