json字符串中的超链接答案

【问题标题】：hyperlinks within json stringjson字符串中的超链接
【发布时间】：2016-06-07 08:20:58
【问题描述】：

我有一个角度模板将 JSON 数据提取到事件日历中。有没有办法在 JSON 中的字符串中包含 url 链接，例如：

    { "name" : "Lee Morgan",
      "interviewer":"interviewed by: <a href='http://onehungrymind.com/angularjs-dynamic-templates/'>Sonny Stitt</a>",
      "day" : "Saturday",
      "date": "April 18th",
    },

我需要这样做的原因是因为我的一些数据具有“interviewer”变量，而有些则没有 - 请看下图。我想可能包括整个“interviewed by”作为占位符，但是面试官的名字需要超链接。

【问题讨论】：

我认为你应该阅读更多关于$sce
是的，可以只对 HTML 进行编码，然后对其进行解码。要将其附加到视图中，请使用 ng-sanitize
@Raulucco 谢谢你，我想我已经接近了，我得到了想要的显示，但是当我点击 url 它加载它很奇怪，请看看小提琴并点击 Art Blakey视图：jsfiddle.net/oLhr2ser/30
@roob 我刚刚检查了它，它播放错误的网址对我来说似乎很正常。我用转义的双引号更改了编码双引号（\"）
[已解决] @Raulucco 做到了，只是转义破折号和 ng-sanitize。希望我能再次投票支持您的答案以赢得特权/排名等。谢谢。更新小提琴以防万一：jsfiddle.net/oLhr2ser/33

标签： angularjs json

【解决方案1】：

Angular 在将 HTML 插入模板时会自动转义它。您可以使用ng-bind-html 来防止这种情况发生，例如

// In the controller
$scope.myObject = <the JSON object you provided>;

<!-- The view -->
<div ng-bind-html="myObject.interviewer"></div>

来源/相关：AngularJS: Insert HTML from a string

【讨论】：

我不确定这种方法在我的情况下如何工作，并不是说它会或不会。似乎这一次只能应用于一个字符串/对象，在我的情况下，我的数据包括数百个条目，有些有额外的位，有些则没有
这是一个小提琴，尝试在四个条目上遵循此方法，但没有任何结果：jsfiddle.net/roob/oLhr2ser/26
我有一个更新的小提琴，几乎就在那里，但行为怪异：jsfiddle.net/oLhr2ser/30

【解决方案2】：

可以使用ngSanitize 并转义链接的双引号。在任何特殊字符的情况下，对 url 进行编码可能也是一种好习惯，但并非绝对需要。

{ "first_name" : "Lee",
    "last_name" : "Morgan",
    "day" : "Saturday",
    "date": "April 18th",
    "stage" : "norris-panel",
    "interviewer":", interviewed by: <a href=\"//onehungrymind.com/angularjs-dynamic-templates\" target=\"_blank\"><u>Art Blakey</u></a>",
    "genre" : "music",
    "work_title" : "Trumpet Dreams",
  "convrs_nmber":"1051",
    "time" : "10:00 am"
},

【讨论】：