如何使用 ng-bind-html 渲染动态数据答案

【问题标题】：How to render dynamic data using ng-bind-html如何使用 ng-bind-html 渲染动态数据
【发布时间】：2018-02-23 13:56:26
【问题描述】：

我正在从服务中获取对象列表。我使用 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);
           };
           }])

问题是我的 UI 中没有显示动态 html 内容。

我的 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>

【问题讨论】：

标签： angularjs angularjs-directive angularjs-material

【解决方案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;
});

【讨论】：

在示例中 $scope.list 是静态的，这意味着您在控制器中声明了它，但在我的情况下，我正在从服务器获取 $scope.list 数据。我不知道为什么 ng-bind-html 指令没有渲染我的动态 html。
仍然适用于将 html 作为字符串格式的规则。您检查过您的响应 html 值吗？
你去。我已经更新了我的答案，以从 $http 响应中获取数据，就像使用虚拟数据一样。请检查..

【解决方案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+

【讨论】：

【解决方案3】：

检查控制台是否有错误消息
检查您的导入 (angular-sanitize)
检查过滤器名称是否有错别字
检查定义过滤器的模块是否包含在您的控制器或组件模块中

(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>

【讨论】：