解码JSON HTML数据以显示在AngularJs中

Question

我有JSON数据，其中还有一些HTML标签。当我试图在浏览器中显示该数据时，它也会像将其转换为应显示的内容一样打印HTML标签。请参阅下面的代码。

我的JSON数据（ibmndata.php我正在将php数据转换为json）：

[
   {
    "title": "<span class='data'>Lectures</span>",
    "content" : "lectures.jpg"
      },
      {
    "title": "<span class='data'>Case Study Analysis</span>",
    "content" : "case-study.jpg"
      },
      {
    "title": "<span class='data'>Industry Analysis Projects</span>",
    "content" : "industry-a.jpg"
      },{
    "title": "<span class='data'>Summer Internship Projects</span>",
    "content" : "summer-internship.jpg"
      }
]

我的角度数据

模型（在这里我在其他示例中发现了'ngsanitize'软件包）

var app = angular.module('ibmnApp', ['ngAnimate', 'ngRoute', 'ngSanitize', 'ui.bootstrap']);

控制器

app.controller('ibmnController', ['$scope', '$http', function($scope, $http)
{
    $http.get('ibmndata.php').success(function(data)
    {
        $scope.ibmnlist = data;
    });
}]);

html part

<div class="col-md-9" ng-controller="ibmnController">
   <div class="col-md-9" ng-repeat="item in ibmnlist">
      <p>{{item.title}}</p>
      <p ng-bind-html="item">{{item.content}}</p>
   </div>
</div>

我在网上发现了类似的问题，但其解决方案对我不起作用。请告诉我，我的代码中可能是什么问题，或者建议我在Angularjs中做到这一点。谢谢。

Answer 1

这是一个工作的plunker：http：//plnkr.co/edit/fz5lnxmv5ngnzyv6fsz2？p = preview

您必须添加"不安全"过滤器：

angular.module('myApp').filter('unsafe', function ($sce) {
   return function (val) {
      if( (typeof val == 'string' || val instanceof String) ) {
         return $sce.trustAsHtml(val);
      }
   };
});

和视图：

<div ng-controller="ibmnController">
   <div ng-repeat="item in ibmnlist">
      <p ng-bind-html="item.title | unsafe "></p>
      <p>{{item.content}}</p>
   </div>
</div>

---

奖金：您正在使用 success的 CC_1，谁是弃用的，请改用 then：

官方文档：

//简单获取请求示例：

$http({
 method: 'GET',
 url: '/someUrl'
 }).then(function successCallback(response) {
  // this callback will be called asynchronously
  // when the response is available
 }, function errorCallback(response) {
  // called asynchronously if an error occurs
  // or server returns response with an error status.
 });