在AngularJS中使用ng-bind-html来使用服务功能。

14 浏览
0 Comments

在AngularJS中使用ng-bind-html来使用服务功能。

我试图使用一个在AngularJS服务中定义的名为highlightReview的转换函数，并使用ng-bind-html属性，但我无法使其工作。\n以下是一个示例：\nfunction myReputationSrvc($http, $q, $log, $sce) {\n this.highlightReview = function(text) {\n return $sce.trustAsHtml(text);\n }\n}\n然后在HTML中调用该函数，如下所示：\n\n没有调用任何内容，也没有抛出错误，看起来ng-bind-html只能与$scope上下文中的函数或变量一起使用，因为如果我将函数移动到$scope中，然后使用ng-bind-html=\"highlightReview(review.positiveText)\"调用它，它将正常工作。\n有没有办法使用服务中的函数？我将函数放在服务中是因为我想在多个控制器之间共享这个函数。\nAngularJS版本是1.6.5。

0

3 答案

0 Comments

在AngularJS文档中提到，如果在使用的模块中注入了ngSanitize，那么可以使用ng-bind-html来传递一个字符串参数，该参数的值是HTML。

问题的出现原因：

在AngularJS中，为了防止XSS攻击（跨站脚本攻击），默认情况下，ng-bind-html指令不会将HTML代码作为字符串直接绑定到页面上。这是为了防止恶意用户将包含恶意脚本的HTML代码插入到页面中。

解决方法：

为了使用ng-bind-html指令绑定HTML代码，需要在使用的模块中注入ngSanitize模块。ngSanitize模块提供了一个过滤器，用于对HTML代码进行安全转义处理。

代码示例：

首先，在HTML文件中引入ngSanitize模块：

然后，在AngularJS模块中注入ngSanitize模块：

angular.module('myApp', ['ngSanitize']);

最后，使用ng-bind-html指令来绑定HTML代码：

在控制器中，将HTML代码赋值给$scope变量，例如：

$scope.htmlCode = '
Hello, AngularJS!
';

这样，ng-bind-html指令将会将HTML代码作为字符串绑定到页面上，同时进行安全转义处理，防止XSS攻击的发生。

通过在使用的模块中注入ngSanitize模块，可以使用ng-bind-html指令将HTML代码作为字符串绑定到页面上，并进行安全转义处理，从而防止XSS攻击的发生。

0
0 Comments

使用AngularJS中的ng-bind-html时，可能会遇到需要传递两个参数给函数的情况。在这种情况下，可以使用过滤器来解决。下面是解决方法的示例代码：

首先，创建一个过滤器函数，使用$sce服务来信任HTML代码：

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

然后，在HTML中使用ng-bind-html指令，并将需要转换的文本传递给过滤器函数：

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

如果需要传递两个参数给过滤器函数，可以参考以下链接的解决方案：

stackoverflow.com/questions/16227325/…

0
0 Comments

在AngularJS中使用ng-bind-html时，出现了“use service function with ng-bind-html in AngularJS”问题。问题的原因是在模板中无法直接调用服务函数，需要将服务注入到控制器中，并将函数放置在控制器中。

解决方法之一是创建自定义过滤器来完成这个任务。

以下是一个示例代码：

.filter('mysce',function($http, $q, $log, $sce){

return $sce.trustAsHtml(text);

});

在模板中可以这样使用：

通过将服务注入到控制器中，并在控制器中调用服务函数，可以解决这个问题。另外，还可以使用上述示例中的通用过滤器来解决问题。

0