我正在尝试使用 AngularJS 的 UI-Router 来实现嵌套 View ，这似乎有效。但是，在第97行中，您会发现一个解析，它延迟了嵌套 View 的初始化，直到接收并处理数据为止。
您会注意到我正在将 json feed 捕获到 localStorage 中(第 123 行)。我使用它来保存每个帖子的副本，以便快速数据检索和 UI 绑定(bind)，而不必等待第二个 Ajax 请求来检索该数据。
问题
如果您单击从 ajax 请求返回的任何链接，将会出现一个嵌套 View 。 View 中填充的数据似乎已完全转换为文本。没有 HTML 标记呈现为 HTML...一个完整的字符串。
诊断
我不确定是什么原因造成的。难道是因为我使用了 jQuery Ajax 调用来检索该信息？
我之前尝试过使用 Angular 自己的 $http.jsonp但我一直收到一个我无法弄清楚的类型错误...所以也许 Angular 只擅长“它”获取数据？我个人想在这个小应用程序中放弃 jQuery，但似乎唯一的选择是为我毫无问题地检索数据。
请求
希望将数据绑定(bind)到最终的嵌套 View 以呈现为 HTML，而不是字符串。谢谢! jsFiddle:http://jsfiddle.net/halkibsi/Z5aEs/11/
注意
此应用程序的第三级嵌套 View 不会在 Firefox 中显示，仅在 Chrome 和 Safari 浏览器中工作。未在 IE 或 Opera 中测试。
// LOAD MODULES
angular.module('myApp', ['ui.router'])
.run([ '$rootScope', '$state', '$stateParams', function ($rootScope, $state, $stateParams) {
$rootScope.$state = $state;
$rootScope.$stateParams = $stateParams;
}]);
/*************************/
// STATES
/*************************/
angular.module('myApp')
.config( ['$stateProvider', '$urlRouterProvider', function ( $stateProvider, $urlRouterProvider ) {
/***************************/
// Redirects and Otherwise //
$urlRouterProvider
.when('/en', '/en/news')
.otherwise('/');
/************************/
// State Configurations //
$stateProvider
/********/
// HOME //
/********/
.state('home', {
url: '/',
template:
'<div>'+
'<header class="section-title"><h1>HOME</h1></header>'+
'<ul class="nav">'+
'<li ng-class="{ active: $state.includes(\'arabic\') }"><a ui-sref="arabic">عربي</a></li>'+
'<li ng-class="{ active: $state.includes(\'english\') }"><a ui-sref="english">English</a></li>'+
'</ul>'+
'</div>',
})
/**********/
// ARABIC //
/**********/
.state('arabic', {
url: '/ar',
//abstract: true,
template:
'<div dir="rtl">'+
'<header class="section-title"><h1>الواجهة العربية</h1></header>'+
'<ul class="nav">'+
'<li ng-class="{ active: $state.includes(\'home\') }"><a ui-sref="home">الصفحة الرئيسية</a></li>'+
'<li ng-class="{ active: $state.includes(\'english\') }"><a ui-sref="english">English Interface</a></li>'+
'<li><a href="#/ar/ndc-news">أخبار</a></li>'+
'<li><a href="#/ar/ndc-photos">صور</a></li>'+
'<li><a href="#/ar/ndc-videos">فيديو</a></li>'+
'<li><a href="#/ar/ndc-podcasts">صوتيات</a></li>'+
'</ul>'+
'<!-- MAIN UI VIEW FOR THIS TEMPLATE -->'+
'<div ui-view ng-animate="{enter:\'fade-enter\'}"></div>'+
'</div>',
})
/***********/
// ENGLISH //
/***********/
.state('english', {
//abstract: true,
url: '/en',
template:
'<div>'+
'<header class="section-title"><h1>English Interface</h1></header>'+
'<ul class="nav">'+
'<li ng-class="{ active: $state.includes(\'home\') }"><a ui-sref="home">Home</a></li>'+
'<li ng-class="{ active: $state.includes(\'arabic\') }"><a ui-sref="arabic">الواجهة العربية</a></li>'+
'<li ng-class="{ active: $state.includes(\'english.news\') }"><a ui-sref="english.news">News</a></li>'+
'<li ng-class="{ active: $state.includes(\'english.photos\') }"><a ui-sref="english.photos">Photos</a></li>'+
'<li ng-class="{ active: $state.includes(\'english.videos\') }"><a ui-sref="english.videos">Videos</a></li>'+
'<li ng-class="{ active: $state.includes(\'english.podcasts\') }"><a ui-sref="english.podcasts">Podcasts</a></li>'+
'</ul>'+
'<!-- MAIN UI VIEW FOR THIS TEMPLATE -->'+
'<div ui-view ng-animate="{enter:\'fade-enter\'}"></div>'+
'</div>',
})
// English -> NDC News
.state('english.news', {
url: '/news',
template:
'<header class="section-title"><h2>News</h2></header>'+
'<ul>'+
'<li ng-repeat="post in posts"><a ui-sref="english.news.single({postId:post.id})">{{ post.title }}</a></li>'+
'</ul>'+
'<div style="margin: 0 0 0 2em;">'+
'<!-- MAIN UI VIEW FOR THIS TEMPLATE -->'+
'<div class="ui-view-lev2" ui-view></div>'+
'</div>',
resolve: {
news: function() {
return $.ajax({
type: "GET",
url: "http://ndcye.org/api/get_posts/?post_type=post&cat=3&callback=?",
dataType: "jsonp",
success: function(response){
//console.log(response);
var newsList = [];
for ( var i=0; i < response.posts.length; i++) {
var id = response.posts[i].id;
var title = response.posts[i].title;
var thumbnail = response.posts[i].thumbnail_images.mobile.url;
var excerpt = response.posts[i].excerpt;
var content = response.posts[i].content;
// SAVE POST AS AN OBJECT
var post_object = {
id: id,
title: title,
thumbnail: thumbnail,
excerpt: excerpt,
content: content,
};
if (localStorage.getItem( 'post_object_'+id ) === null) {
localStorage.setItem( 'post_object_'+id, angular.toJson(post_object) );
}
newsList.push(post_object);
}
localStorage.setItem( 'ndc_news', angular.toJson(newsList) );
console.log( newsList );
},
error: function(){
console.log("error!");
}
});
}
},
controller: ['news', '$scope', '$state', function (news, $scope, $state) {
$scope.posts = news.posts;
console.log($scope.posts);
}], // controller end
})
// English -> NDC News Single
.state('english.news.single', {
url: '/{postId:[0-9]{1,4}}',
template:
'<header class="section-title"><h3>{{ singlePost.title }}</h3></header>'+
'<div>{{ singlePost.content }}</div>',
controller: ['$scope', '$state', '$stateParams', function ($scope, $state, $stateParams) {
var singlePost = '';
singlePost = angular.fromJson( localStorage.getItem( 'post_object_' + $stateParams.postId ) );
$scope.singlePost = singlePost;
console.log( singlePost );
}]
})
// English -> NDC Photos
.state('english.photos', {
url: '/photos',
template:
'<header class="section-title"><h2>Photos</h2></header>'+
'Photo albums go here',
})
// English -> NDC Videos
.state('english.videos', {
url: '/videos',
template:
'<header class="section-title"><h2>Videos</h2></header>'+
'YouTube playlists go here',
})
// English -> NDC Podcasts
.state('english.podcasts', {
url: '/podcasts',
template:
'<header class="section-title"><h2>Podcasts</h2></header>'+
'Podcast playlists go here',
})
} // end function ($stateProvider, $urlRouterProvider)
]) // end .CONFIG
; // ens STATES
最佳答案
该程序存在两个问题:
- 您使用
{{ ... }}将singlePost.content绑定(bind)到 HTML。这必然会转义 HTML - 仅使用
ng-bind-html="singlePost.content"是行不通的，因为 Angular 现在仅渲染 trusted HTML .
唯一需要更改的是状态 english.news.single:
.state('english.news.single', {
url: '/{postId:[0-9]{1,4}}',
template:
'<header class="section-title"><h3>{{ singlePost.title }}</h3></header>'+
'<div ng-bind-html="content"></div>',
controller: ['$scope', '$state', '$stateParams', '$sce', function ($scope, $state, $stateParams, $sce) {
var singlePost = '';
singlePost = angular.fromJson( localStorage.getItem( 'post_object_' + $stateParams.postId ) );
$scope.singlePost = singlePost;
$scope.content = $sce.trustAsHtml(singlePost.content);
console.log( singlePost );
}]
})
工作示例:http://jsfiddle.net/Z5aEs/12/
旁注:它在 Firefox 25 中也适用于我。
关于jquery - AngularJS fromJson 返回字符串？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20033365/