AngularJS中以JSON格式展示HTML元素的技术问题

嘿，我来帮你搞定这个AngularJS渲染HTML链接的问题！看起来你已经走对了第一步——引入了ngSanitize模块，这是解析HTML内容的关键。不过还有两个小地方需要调整，就能让那些链接正常显示啦：

1. 修正$http获取数据的方式 #

你的控制器里把整个response对象赋值给了$scope.links，但实际上API返回的JSON数据是存在response.data属性里的。所以要改成：

var myApp = angular.module('myApp', ['ngSanitize']); 
myApp.controller('myController',function($scope, $http) { 
  $http.get('http://localhost/drupal3/menu') 
    .then(function(response) { 
      // 注意这里要取response.data，而不是整个response对象
      $scope.links = response.data; 
    }); 
});

2. 在视图中使用ng-bind-html指令渲染HTML #

在你的HTML模板里，不要直接用{{ link.field_add_link }}（那样会显示转义后的纯文本），而是用ng-bind-html来告诉Angular解析并渲染HTML内容：

<div ng-app="myApp" ng-controller="myController">
  <div ng-repeat="link in links">
    <!-- 使用ng-bind-html绑定field_add_link，渲染成可点击的链接 -->
    <div ng-bind-html="link.field_add_link"></div>
  </div>
</div>

为什么这样有效？ #

• ngSanitize模块会自动处理HTML内容的安全性，过滤掉潜在的XSS风险（你的链接是可信的内部地址，完全不用担心）。
• ng-bind-html指令会把绑定的字符串当作HTML来解析渲染，而不是纯文本，这样转义后的<a>标签就会变成真正可点击的链接了。

内容的提问来源于stack exchange，提问作者devFresher