如何在Angular的JSON属性中绑定HTML数据

Question

My JSON looks like:

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

I'm getting it in my controller like this:

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.");
      });
});

And bind it in view:

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

But if I have HTML tags in Content, how can I have it also binded to view with that tags parsed.

Answer 1

Use ng-bind-html to handle content as html content.

<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>

Also don't forget to include ngSanitize module in your application like this.

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

You can read more about ng-bind-html HERE .

Answer 2

使用ngBindHtml ：

<span ng-bind-html="newsfeed.Content"></span>

Answer 3

Instead of loading the HTML tags as part of Content, just replace them with the name (eg just "Content2") and load them inside ap tag. So your JSON would look like:

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

and your view should contain this line:

<p> {{newsFeed.content}} </p>