javascript - Angular Js如何读取其中包含html元素的JSON数据

Question

我们在读取包含 html 内容的 json 文件数据时遇到问题。请找到下面的代码，其中包含我们正在使用的 json 数据。

Json 数据:

{
    "aboutContent": {
        "listItems": [{
            "title": "Investors",
            "description": "Investors Together, we are transforming health care with trusted and caring solutions. Learn more about upcoming events,",
            "image": "image/ABCBS_handshake.jpg",
            "something": "sadfsd"
        }, {
            "title": "Careers",
            "description": "Discover your opportunity with us now. Learn more about careers at Anthem, Inc.",
            "image": "image/ABCBS_AboutUs_Careers.jpg"
        }, {
            "title": "Locations",
            "description": "Need to contact us? See where we are located near you. Learn more about our locations.",
            "image": "image/ABC_AboutUs_Locations.jpg"
        }, {
            "title": "Foundation Guidelines",
            "description": "See how Anthem Blue Cross Blue Shield gets involved. Learn more about our Foundation Guidelines and Community Involvement.",
            "image": "image/ABCBS_AboutUs_Charity.jpg"
        }, {
            "title": "Press Room",
            "description": "<div><span style=\"color: rgb(105, 105, 105); font-family: Arial; font-size: 12px; line-height: 16px;\">Investors Together, we are transforming health care with trusted and caring solutions.</span><a href=\"http://ir.antheminc.com/phoenix.zhtml?c=130104&amp;p=irol-irHome\" style=\"color: rgb(0, 138, 183); text-decoration: none; font-family: Arial; font-size: 12px; line-height: 16px;\" target=\"_blank\">Learn more about upcoming events, financials and how to contact us </a>
    </div>",
            "image": "image/ABCBS_AboutUs_Press.jpg"
        }]
    }
}

服务

angular.module("newsStore.moduleServices", [])
        .factory('aboutService', ['$http', '$q', aboutService]);

function aboutService($http, $q) {
    return {
        getAboutContent: function() {
            var deferred = $q.defer(),
                fetchContent = $http.get('json/about.json');
            fetchContent.success(function(news) {
                console.log(news);
                deferred.resolve(JSON.parse(news));
            }).error(function(error) {
                console.log('error', error);
                deferred.reject(error);
            });

            return deferred.promise;                
        }
    }
}

指令:

angular.module("newsStore.moduleDirectives", [])
        .directive('renderAboutContent', ['aboutService', renderAboutContent])

function renderAboutContent(aboutService) {
    return {
        restrict: 'AE',
        scope: {},
        templateUrl: 'templates/about.html',
        link: function(scope, element) {
            aboutService.getAboutContent()
                .then(function(results) {
                    scope.aboutList = results.aboutContent.listItems;                       
                }, function(error) {
                    console.log('controller error', error);
                });
            scope.colWidth = function(content) {
                return content.image && content.something ? 'col-xs-4' : 'col-xs-6';
            }
        }
    }
}

HTML 内容:

<div class="col-md-12 aboutUs-ph padT10 content-ph_abt" ng-repeat="content in aboutList">
    <div class="form-group" ng-if="content.image" >
        <img src="{{content.image}}" class="img-responsive" />
    </div>
    <div class="middle" >
        <span class="guidedTourText">
            <b>{{content.title}}</b></span>
            <br>
        <span>{{content.description | to_trusted}} </span>
    </div>

    <div class="last" ng-if="content.something">
        {{content.something}}
    </div>
</div>

现在，在上面的 json 文件中，我们可以读取开始的三项，但我们无法读取最后一项，因为它在描述项中包含 html 元素。我也使用过 ngsanitize 但这没有帮助所以你们可以让我知道如何解决这个问题吗？运行页面时出现此错误

语法错误:意外的标记 o 在 Object.parse ( native ) 在http://localhost:8997/script/services.js:30:28 在http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js:80:385 在http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js:112:20 在 l.$eval ( http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js:125:305 ) 在 l.$digest ( http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js:122:398 ) 在 l.$apply ( http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js:126:58 ) 在 l ( http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js:81:171 ) 在 S ( http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js:85:301 ) 在 XMLHttpRequest.D.onload (http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js:86:315)

我知道这个错误来自 json 本身，如果我删除 html 元素，一切都会正常。

如果我不清楚这个问题，请告诉我，提前致谢。

Answer 1

似乎 Json 无效，因为您包含带引号“”的 html 代码。检查一下here尝试用单引号 '' 替换它。它应该可以帮助您避免此错误。

如果您在显示 html 时遇到问题，请使用

<div ng-bind-html-unsafe="expression"></div>