$sce.trustAsHtml 过滤器未与 ng-bind-html 一起应用于动态数据答案

【问题标题】：$sce.trustAsHtml filter is not getting applied with ng-bind-html on dynamic data$sce.trustAsHtml 过滤器未与 ng-bind-html 一起应用于动态数据
【发布时间】：2018-05-31 11:40:45
【问题描述】：

我正在尝试通过使用 ng-bind-html 和过滤器来显示我在 div.testData 中收到的 html 内容。我已经在我的应用程序中包含了“ngSanitize”。但不知何故，它只能部分起作用。好像，过滤器没有被应用。当我创建一个本地文件并检查时它工作正常，但当我在我的项目环境中使用相同的代码时它不起作用。

样本数据：

$scope.userProfile.Information = '&lt;p&gt;Hello, this is sample data to test html.&lt;/p&gt;';

显示的输出是：

'<p>Hello, this is sample data to test html.</p>'

期望的输出是：

'Hello, this is sample data to test html.'

请帮我解决这个问题。

HTML：

<div ng-app="myApp" ng-controller="myCtrl">
  <div class="testData" ng-bind-html= "userProfile.Information | to_trusted"></div>

过滤器：

app.filter('to_trusted', ['$sce', function($sce){
 return function(text) {
    var doc = new DOMParser().parseFromString(text, "text/html");
    var rval= doc.documentElement.textContent;
    //console.log(rval);
    return $sce.trustAsHtml(rval);
  };
}]);

【问题讨论】：

标签： angularjs parsing filter ng-bind-html ngsanitize

【解决方案1】：

答案已经是here。

app.filter('to_trusted', ['$sce', function($sce){     
    return $sce.trustAsHtml;
}]);

【讨论】：

它似乎不起作用。我仍然得到与上述相同的结果。

【解决方案2】：

您可以尝试使用下面的代码，因为您有使用此plunker 的给定工作示例。请也检查一下..

控制器：

app.filter('to_trusted', ['$sce', function($sce){
 return function(text) {
    var txt = document.createElement("textarea");
    txt.innerHTML = text;
    return $sce.trustAsHtml(txt.value);
  };
}]);

【讨论】：

是一样的。它在我的项目环境中没有按预期呈现！
我在过滤器中传递了一个警报。但是我在本地环境中收到警报，但在项目环境中没有。似乎过滤器本身没有被调用！
发生这种情况是因为在我的项目环境中，我通过 AJAX 调用获得了“$scope.userProfile.Information”。我该如何让它发挥作用？
您能否使用 plunker 创建一个示例错误场景，以便我们更好地帮助您。
我在这里创建了一个小提琴。 jsfiddle.net/15o8d40h 基本上，如果我得到我尝试渲染的 ajax 响应，则过滤器不起作用。在静态数据上，它工作正常。

【解决方案3】：

var app = angular.module("Profile",[])
app.directive('toTrusted',function(){
       return function(scope,element,attr){
            var result      = attr.data
            var input_val   = result.replace(/&lt;/g,  "<").replace(/&gt;/g,  ">").replace(/&#10;/g, "\n");
            element[0].innerHTML    = input_val;
            scope.use_recusrive(element[0].firstElementChild,element[0])
    }
 
               
                        
                       
       
})
app.controller("ProfileCtrl", function($scope, $rootScope,$sce){
             $scope.valid_input      = '&lt;div&gt; div 1 sample  &lt;p&gt; div1 indide p tag .&lt;/p&gt;&lt;/div&gt;&lt;p&gt; p tag 2.&lt;/p&gt; &lt;div&gt;DIV 2 Sample &lt;/div&gt;';
             $scope.use_recusrive    = function(dom,p_node){
            if(!dom)
                    return;
            var s_dom        = dom.firstElementChild
            if(!s_dom){
                    var text_content        = dom.textContent||'';
                    var tag_name            = dom.tagName
                    var new_text_content    = text_content+' to be renedered as '+"'"+tag_name+"'"+' tag.';
                    dom.textContent = new_text_content;
                    /*if(s_dom.nextElementSibling)
                            $scope.use_recusrive(s_dom.nextElementSibling,dom)*/
            }else{
                     $scope.use_recusrive(dom.firstElementChild,dom)
            }
            var nex_sibling  = dom.nextElementSibling
            if(nex_sibling){
                    $scope.use_recusrive(nex_sibling,dom)
            }
    }
  
})

div{
  color:black;
 font-weight:700;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="Profile" ng-controller="ProfileCtrl">
     <div to-trusted data={{valid_input}} ></div>
</body>

【讨论】：

我的问题更多是关于 ajax 响应。如何清理输入并显示 html 内容？
您也可以使用这种代码。渲染后获取 dom 中的每个元素并更新元素 textContent。无需使用 sanitize。请参阅 $scope.valid_input 结构。