从 JSON 文件解析 HTML 时 ngResource 不起作用
ngResource doesn't work when parse HTML from JSON file
我正在尝试从 json 文件获取博客文章并以 HTML 格式解析 'description'。我使用 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 的描述?
当你引用帖子循环时,请使用控制器别名 blog
。
<div class="post" ng-repeat="post in blog.posts">
然后
<div ng-bind-html="post.description | sanitize"></div>
注意:我在你的问题中看不到任何与 ngResource 相关的代码。您是否遗漏了任何要补充的问题?
我正在尝试从 json 文件获取博客文章并以 HTML 格式解析 'description'。我使用 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 的描述?
当你引用帖子循环时,请使用控制器别名 blog
。
<div class="post" ng-repeat="post in blog.posts">
然后
<div ng-bind-html="post.description | sanitize"></div>
注意:我在你的问题中看不到任何与 ngResource 相关的代码。您是否遗漏了任何要补充的问题?