3

ng-bind-html とフィルターを使用して、div.testData で受け取った html コンテンツを表示しようとしています。アプリには既に「ngSanitize」が含まれています。しかし、どういうわけか、部分的にしか機能しません。フィルターが適用されていないようです。ローカル ファイルを作成してチェックすると正常に動作しますが、プロジェクト環境で同じコードを使用すると動作しません。

サンプルデータ：

$scope.userProfile.Information = '<p>Hello, this is sample data to test html.</p>';

表示される出力は次のとおりです。

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

3 に答える 3

1

このplunkerを使用した特定の実例があるので、以下のコードのように試すことができます。それもチェックしてください..

コントローラ：

app.filter('to_trusted', ['$sce', function($sce){
 return function(text) {
    var txt = document.createElement("textarea");
    txt.innerHTML = text;
    return $sce.trustAsHtml(txt.value);
  };
}]);
于 2017-12-18T07:11:28.500 に答える
0 

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>

于 2017-12-18T10:51:05.350 に答える