使用 Angular js 在 JSON 中显示 HTML 元素答案

【问题标题】：Show HTML elements in JSON with Angular js使用 Angular js 在 JSON 中显示 HTML 元素
【发布时间】：2018-09-15 04:20:58
【问题描述】：

我是 Angular js 的新手，我正在尝试使用 Angular js 格式化 json 数据。

这是我的 json 数据

 [
   {"field_add_link": "<a href=\"/drupal3/drupal3/\">Home</a>"},
   {"field_add_link": "<a href=\"/drupal3/drupal3/about\">About Us</a>"}
]

这是我的控制器

var myApp = angular.module('myApp', ['ngSanitize']);
myApp.controller('myController',function($scope, $http) {
   $http.get('http://localhost/drupal3/menu')
   .then(function(response) {
       $scope.links = response;
    });
});

最后是我如何使用 angular 获取 json 数据

<div class="col-md-8 content"  ng-controller ="myController">
    <div class="col-md-12" ng-repeat="link in links" ng-bind-html="links">
        <p>{{ link.field_add_link }}</p>
    </div>      
</div>

在此之后没有显示输出，在浏览器的控制台中出现错误Error: [$sce:unsafe] Attempting to use an unsafe value in a safe context.

但是当我使用ng-bind-html="links[0].field_add_link 而不是ng-bind-html="links" 和{{ link[0].field_add_link }} 而不是{{ link.field_add_link }} 时

然后我得到<a href="/drupal3/drupal3/">Home</a> 作为输出'不解释标签'

请问，我该怎么办？

【问题讨论】：

使用$sce.trustAsHtml(...) 信任您编译的链接。（另外你需要分配response.data）
阅读ngSanitize docs.angularjs.org/api/ngSanitize

标签： javascript html angularjs json

【解决方案1】：

首先，您不需要div 和ng-repeat 上的ng-bind-html 属性。它应该在您的p 标签上。其次，您需要绑定link（ng-repeat-loop 的当前元素）而不是links（数组）。尽管您需要查看错误 [$sce:unsafe]。 HTMl 只有在受信任的情况下才能绑定到元素主体。为此，您需要有一个过滤器。

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

<div class="col-md-8 content"  ng-controller ="myController">
    <div class="col-md-12" ng-repeat="link in links">
        <p ng-bind-html="link.field_add_link | to_trusted"></p>
    </div>      
</div>

【讨论】：

非常感谢...我试过了，但我遇到了错误Error: [$sce:insecurl] Blocked loading resource from url not allowed by $sceDelegate policy

【解决方案2】：

您只需将 ng-bind-html 从 div 移动到 ，如下面的代码。

  <p ng-bind-html="link.field_add_link"></p>

var myApp = angular.module('myApp', ['ngSanitize']);
myApp.controller('myController', function($scope, $http) {
var data = [{"field_add_link": "<a href=\"/drupal3/drupal3/\">Home</a>"},
    {"field_add_link": "<a href=\"/drupal3/drupal3/about\">About Us</a>"}];
  $scope.links = data;
 //For demo, removed the http call
});

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular-sanitize.js"></script>
</head>
<body ng-app="myApp">
  <div class="col-md-8 content" ng-controller="myController">
    <div class="col-md-12" ng-repeat="link in links">
      <p ng-bind-html="link.field_add_link"></p>
    </div>
  </div>
</body>

【讨论】：

非常感谢，这行得通，但是当我使用 http call 时它不起作用
它在控制台中显示此错误Error: [$sce:insecurl] Blocked loading resource from url not allowed by $sceDelegate policy.