在Angular JS 1项目的JS文件中插入HTML超链接的实现问题

• 第一步：修改description变量，写入完整的HTML超链接内容

var description = '我想要在此处插入<a href="你的目标跳转地址">超链接显示文本</a>' 
var stories = []
export default {
  stories,
  description,
}

• 第二步：在调用该数据的控制器中注入$sce服务，将HTML内容标记为可信任内容

// 控制器注入$sce
app.controller('你的控制器名', ['$scope', '$sce', 'hcwStoriesData', function($scope, $sce, hcwStoriesData) {
  // 把获取到的description转为受信任的HTML
  $scope.description = $sce.trustAsHtml(hcwStoriesData.description);
}])

• 第三步：修改页面模板，使用ng-bind-html指令渲染内容，不要使用双花括号插值，双花括号会默认转义所有HTML标签为纯文本

<!-- 错误写法，会把HTML当纯文本显示 -->
<!-- <p>{{description}}</p> -->
<!-- 正确写法 -->
<p ng-bind-html="description"></p>

• 可选补充：如果上述操作后仍然不生效，需要确认是否引入了ngSanitize模块：
  • 引入和当前AngularJS 1版本一致的angular-sanitize.js文件
  • 在应用模块声明中注入ngSanitize依赖：

  var app = angular.module('你的应用模块名', ['ngSanitize']);
  

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