Question

我从服务中获取对象列表。我使用ng-repeat在ui中显示json对象数据。

<div class="agreementPopover" ng-repeat="pm in list">
                <p class="md-subhead robotoMedium bodyFontColor zeroMrgn" >{{pm.des}}</p>
                <p class="md-subhead blackColour btmMrgn" ng-bind-html="pm.html| renderHTML"></p>
            </div>

我创建了一个自定义过滤器，用于在信任html中转换我的html。

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

问题是动态html内容未在我的UI中显示。

我的Html内容

<a href="http://force.com/PublicKB/articles/FAQ/What-is-the-for-Program/?q=letter+of+credit&l=en_US&fs=RelatedArticle" target="_blank" class="agreementPaymentLink">www.skip.com</a>

Answer 1

您必须确保数组中的html值为字符串格式，如下所示，您也可以检查示例场景的这个plunker。

<强>模板：

<div class="agreementPopover" ng-repeat="pm in list">
    <p class="md-subhead robotoMedium bodyFontColor zeroMrgn" >{{pm.des}}</p>
    <p class="md-subhead blackColour btmMrgn" ng-bind-html="pm.html| renderHTML"></p>
</div>

<强>控制器：

$http.get('sample.json').then(function(response){
    $scope.list = response.data;
});

Answer 2

演示：

angular.module("test",[]).controller("testc",function($scope,$sce) {
$scope.value= $sce.trustAsHtml('<a href="http://force.com/PublicKB/articles/FAQ/What-is-the-for-Program/?q=letter+of+credit&l=en_US&fs=RelatedArticle" target="_blank" class="agreementPaymentLink">www.skip.com</a>')
      

})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="test" ng-controller="testc">
<p class="md-subhead blackColour btmMrgn" ng-bind-html="value"></p>
        </div>

所以试试这个

//控制器

$scope.sce=$sce;// define `$sce` in your scope object

// html

 <p class="md-subhead blackColour btmMrgn" ng-bind-html="sce.trustAsHtml(pm.html)"></p>

我希望以下讨论能帮助你解决问题

How do you use $sce.trustAsHtml(string) to replicate ng-bind-html-unsafe in Angular 1.2+

Answer 3

检查控制台是否有错误消息
检查您的进口（角度消毒）
检查拼写错误的过滤器名称
检查定义过滤器的模块是否包含在控制器或组件模块中

(function(angular) {
  'use strict';
angular.module('trustedFilter', ['ngSanitize'] )
  .filter('renderHTML', ['$sce', function($sce) {
    return function(val) {
      return $sce.trustAsHtml(val);
    };
  }]);
angular.module('bindHtmlExample', ['trustedFilter'])
  .controller('ExampleController', ['$scope', function($scope) {
    $scope.myHTML = '<a href="http://force.com/PublicKB/articles/FAQ/What-is-the-for-Program/?q=letter+of+credit&l=en_US&fs=RelatedArticle" target="_blank" class="agreementPaymentLink">www.skip.com</a>';
  }])
  
})(window.angular);

/*
Copyright 2018 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
*/

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Example - example-ng-bind-html-production</title>
  

  <script src="//code.angularjs.org/snapshot/angular.min.js"></script>
  <script src="//code.angularjs.org/snapshot/angular-sanitize.js"></script>


  
</head>
<body ng-app="bindHtmlExample">
  <div ng-controller="ExampleController">
 <p ng-bind-html="myHTML | renderHTML"></p>
</div>
</body>
</html>

如何使用ng-bind-html呈现动态数据

3 个答案:

演示：

所以试试这个