首页 文章

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

提问于
浏览
0

我们在阅读包含html内容的json文件数据时遇到了问题 . 请使用我们正在使用的json数据查找下面的代码 .

Json data:

{
    "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"
        }]
    }
}

Service

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;                
        }
    }
}

Directive:

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 content:

<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,但没有帮助,所以你们可以告诉我如何解决这个问题 . 我运行页面时收到此错误

SyntaxError:Object.parse(native)位于http://localhost:8997/script/services.js:30:28处的http://localhost:8997/script/services.js:30:28处于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处的意外标记o( http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js:85:301)at XMLHttpRequest.D.onload(http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js:86:315

我知道这个错误来自json本身,如果我删除html元素一切正常 .

如果我不清楚这个问题,请告诉我,提前谢谢 .

1 回答

  • 1

    看起来像Json是无效的,因为你包含带引号“html”的html代码 . 检查here尝试用单个''替换它 . 它应该可以帮助您避免此错误 .

    如果你有问题显示HTML然后使用

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

相关问题