javascript - 如何在 Angular 中的 JSON 属性中绑定(bind) HTML 数据

Question

我的 JSON 看起来像:

[
  {
    "Title": "MyTitle1",
    "Content": "<p>Content1</p>",
    "Date": "2014-11-19T10:00:00"
  },
  {
    "Title": "MyTitle2",
    "Content": "<p>Content2</p>",
    "Date": "2014-11-19T00:00:00"
  }
]

我将它放入我的 Controller 中，如下所示:

app.controller('NewsfeedCtrl', function ($scope, $http) {
    $http.get(serverAddress + '/api/newsfeed/page/1').
      success(function (data, status, headers, config) {
          $scope.newsfeeds = data;
      }).
      error(function (data, status, headers, config) {
          console.log("Smth went wrong.");
      });
});

并将其绑定(bind)到 View 中:

<div ng-controller="NewsfeedCtrl">
    <div ng-repeat="newsfeed in newsfeeds">
        {{newsfeed.Title}}
        <br />-
        <br />{{newsfeed.Date}}
        <br />-
        {{newsfeed.Content}}
    </div>
</div>

但是如果我的内容中有 HTML 标签，我怎样才能将它绑定(bind)到解析该标签的 View 。

Answer 1

使用ng-bind-html将内容处理为html内容。

<div ng-controller="NewsfeedCtrl">
    <div ng-repeat="newsfeed in newsfeeds">
        {{newsfeed.Title}}
        <br />-
        <br />{{newsfeed.Date}}
        <br />-
        <div ng-bind-html="newsfeed.Content"></div>
    </div>
</div>

另外，不要忘记在您的应用程序中包含 ngSanitize 模块，如下所示。

angular.module('itadPortal', ['ngRoute', 'ngSanitize']);

您可以阅读有关 ng-bind-html HERE 的更多信息.