【发布时间】：2013-11-30 18:02:49
【问题描述】：
我正在尝试使用 AngularJS 的 UI-Router 进行嵌套视图，这似乎正在工作。但是，在第 97 行中，您会发现一个解析，它会延迟嵌套视图的初始化，直到接收并处理数据。
您会注意到我正在将 json 提要捕获到 localStorage（第 123 行）。我正在使用它来保存每个帖子的副本以进行快速数据检索和 UI 绑定，而不必等待第二个 Ajax 请求来检索该数据。
问题
如果您点击任何从 ajax 请求返回的链接，就会出现一个嵌套视图。从视图中填充的数据似乎已完全转换为文本。没有 HTML 标记呈现为 HTML...一个完整的字符串。
诊断
我不确定是什么原因造成的。可能是因为我使用 jQuery Ajax 调用来检索该信息？
我之前尝试使用 Angular 自己的$http.jsonp，但我一直收到一个我无法弄清楚的类型错误......所以也许 Angular 只擅长“它”获取的数据？？我个人想在这个小应用程序中放弃 jQuery，但似乎唯一的选择是为我检索数据而不会出现问题。
请求
希望将数据绑定到最终嵌套视图以呈现为 HTML，而不是字符串。谢谢！ jsFiddle：http://jsfiddle.net/halkibsi/Z5aEs/11/
注意
此应用程序的第 3 级嵌套视图不显示在 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
【问题讨论】：
-
demo 在 jsfiddle 中为我工作。可能会考虑使用服务来存储您的数据并处理存储转换。存储逻辑对我来说没有意义
-
您说的完全正确，很抱歉没有解释在这种情况下使用 localStorage 背后的逻辑。我打算使用工厂服务来创建和更新 ajax 结果的 localStorage 值。但是，我遇到了这个问题，因此没有以对您有意义的方式完全集成 localStorage ......但这不是我遇到的麻烦。谢谢:)
-
+1 因为这个问题写得很好而且很清楚。
标签： jquery ajax json angularjs local-storage