在 AngularJS 中使用带有 ng-bind-html 的服务功能答案

【问题标题】：use service function with ng-bind-html in AngularJS在 AngularJS 中使用带有 ng-bind-html 的服务功能
【发布时间】：2017-09-18 13:17:35
【问题描述】：

我正在尝试使用在 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 然后用@ 调用它987654329@ 工作正常。

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

AngularJS 版本是：1.6.5。

【问题讨论】：

我建议使用基于filter 的解决方案，它非常优雅：stackoverflow.com/a/19705096/1225328。
@sp00m 如果我需要将 2 个参数而不是 1 个参数传递给函数怎么办？假设文本和另一个参数，我还可以使用过滤器吗？
我不确定我是否理解。您介意提供您的实际代码吗？

标签： javascript angularjs angular-services ng-bind-html

【解决方案1】：

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

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

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

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

【讨论】：

我已经在控制器内部注入了服务，我可以在控制器内部使用其他功能
使用上述通用过滤器
@Sajeetharan 你救了我的命！：拥抱：

【解决方案2】：

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

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


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

【讨论】：

如果我需要将两个参数传递给函数怎么办？我还能用过滤器吗？那我怎么称呼它呢？
你可以。检查这个stackoverflow.com/questions/16227325/…

【解决方案3】：

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

如果您将ngSanitize 注入您正在使用的模块，您只需使用ng-bind-html 传递一个值为HTML 的字符串参数。

【讨论】：

【解决方案4】：

你能看看这个plnkr，因为你有一个示例代码sn-p我有那个plunkerlink

示例代码：

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

【讨论】：