javascript - 从 JSON 文件解析 HTML 时 ngResource 不起作用

标签 javascript angularjs json angularjs-ng-repeat ngresource

我正在尝试从 json 文件获取博客文章并解析 HTML 格式的“描述”。我使用 ngResource,但我没有得到任何东西

这是来自 json 的示例数据

  jsonFeed({
    "title": "My Blog",
    "description": "",
    "modified": "2016-05-10T21:21:46Z",
    "items": [
     {
        "title": "Title1",
        "description": "<p><a href=\"#">Paul<\/a> posted a photo:<\/p> <img src=\"https://farm8.staticflickr.com/7365/26872407641_cfbb210ee7_m.jpg\"/>"
   },
   {
        "title": "Title2",
        "description": " <p><a href=\"#">Beth<\/a> posted a photo:<\/p><img src=\"https://farm8.staticflickr.com/7287/26333398074_cfbce73532_m.jpg\" />"
   }
  ]
  })

app.js

 var app = angular.module('blogApp',['ngResource']);
 app.filter("sanitize", ['$sce', function($sce) {
   return function(htmlCode){
    return $sce.trustAsHtml(htmlCode);
  }
 }]);
 app.controller('BlogController', ['$http', '$scope', function($http, $scope){
var blog = this;
blog.posts = {};
  $http.jsonp('url').success(function(data){ 
});
jsonFeed = function(data){
$scope.posts = data.items;
}

index.html

  <body ng-app="blogApp">
    <div ng-controller="BlogController as blog">
        <div class="post" ng-repeat="post in posts">
            <h2>{{post.title}}</h2>
            <div ng-bind-html="'{{post.description}}' | sanitize"></div>
    </div>
    <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.2/angular.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.0/angular-resource.js"></script>
    <script src="app.js" type="text/javascript"></script>
</body>

在结果中我得到了这个

   {{post.description}}

还尝试检查控制台中的元素

  <div ng-bind-html="'<p><a href="#">Paul<\/a> posted a photo:<\/p> <img src=\"https://farm8.staticflickr.com/7365/26872407641_cfbb210ee7_m.jpg\"/>' | sanitize" class="ng-binding">{{post.description}}</div>

为什么我无法解析并查看描述的 html?

最佳答案

当您引用帖子来循环访问它时,请使用 Controller 别名blog

<div class="post" ng-repeat="post in blog.posts">

然后

<div ng-bind-html="post.description | sanitize"></div>

注意:我在您的问题中看不到任何 ngResource 相关代码。您是否遗漏了任何要添加的内容?

关于javascript - 从 JSON 文件解析 HTML 时 ngResource 不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37158129/

相关文章:

javascript - 从数组中删除项目 - Angular 4

javascript - 从菜单列表中的单独 url 加载 html 元素

javascript - 在 Express 3.4.8 中使用 HTTP 状态代码响应时,POST 数据获取 "lost"

javascript - 从 Angular ng-repeat 单击时将图像动态添加到 Bootstrap Modal 中

javascript - 在 JavaScript 中将字符串转换为 JSON

javascript - 如何将此 JSON 数据格式化为日期 (mm/dd/yyyy)

javascript - 通过获取最新文档来减少mongodb的输出

javascript - jQuery 单击外部元素可向上或向下移动包含选中复选框的无序列表项

javascript - 在 ng-repeat 上动态查找最小值

android - 如何在没有 GSON 的情况下从 url 或 android 中的 restful 服务解析巨大的 JSON 数据