在 AngularJS 中将服务功能与 ng-bind-html 结合使用

Question

我正在尝试使用在 AngularJS 服务中定义的名为 highlightReview 的转换函数，其属性为 ng-bind-html 但我可以'让它发挥作用。

请参阅下面的示例：

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

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

然后在 HTML 中调用该函数，如下所示：

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

没有调用任何东西，也没有抛出任何错误，似乎 ng-bind-html 只使用 $scope 上下文中的函数或变量，因为如果我将函数移动到 $scope 然后用 ng-bind-html = "highlightReview(review.positiveText)" 调用它工作正常。

有没有办法使用服务中的功能？ 我把这个功能放在服务中，因为我想在多个控制器之间共享这个功能。

AngularJS 版本为：1.6.5 .

Answer 1

您需要将服务注入您的控制器并将函数放在控制器中，您不能直接从模板调用服务函数。

或者您可以使用自己的过滤器来完成这项工作，

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

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

Answer 2

如果你想让这个变得通用，而不是使用服务，你可以使用 filter

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


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

Answer 3

来自 AngularJS 文档：https://docs.angularjs.org/api/ng/directive/ngBindHtml

如果您将 ngSanitize 注入到您正在使用的模块中，您只需使用 ng-bind-html 传递一个值为 HTML.

的字符串参数

Answer 4

你能看看这个吗plnkr as you have a example code snippet I have with that plunker link

示例代码：

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

在 AngularJS 中将服务功能与 ng-bind-html 结合使用

use service function with ng-bind-html in AngularJS

javascript

angularjs

angular-services

ng-bind-html