jquery - AngularJS fromJson 返回字符串？

Question

我正在尝试使用 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

Answer 1

该程序存在两个问题:

1. 您使用 {{ ... }} 将 singlePost.content 绑定(bind)到 HTML。这必然会转义 HTML
2. 仅使用 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 中也适用于我。