在我的工厂服务返回后,数据显示为可见的HTML标记


After being returned by my factory service, data is displaying with visible HTML tags

我的数据是json_endoded($data);数组,由我的工厂服务获取。然后将其放入Javascript变量中,该变量又用作模板。当最终显示到页面时,输出如下所示:

Some text here<br/><br/> And some link <a class="someclass" href="#">here</a>.

你懂的。如果我print_r或者甚至看到json_endoded数组(直接在Angularjs服务调用数据的PHP页面上),这样的HTML标签是不可见的,break被正确解释-在那里有一个新的行,等等…

我可以用什么来解决这个问题-我不想只是剥离所有的标签-我需要保留任何链接或类似的东西(这些是来自各种社交网络的帖子)。

在MY DIRECTIVE中,变量中的字符串就是这样被用作模板的:

angular.module('socialPosts.directives', [])
    .directive('timelinePost', function($compile){
        var timelineV2 = "<time class='cbp_tmtime'>'n'
                            <span>{{content.publishedDate}}</span>'n'
                            <span>{{content.publishedMonth}}</span>'n'
                         </time><i class='cbp_tmicon rounded-x hidden-xs'></i>'n'
                        <div class='cbp_tmlabel'>'n'
                            <h2>{{content.displayName}}</h2>'n'
                            <div class='row'>'n'
                                <div class='col-md-4'>'n'
                                    <a href='' target='_blank'><img class='img-responsive' src='{{content.imageSrc}}' alt='' /></a>'n'
                                    <div class='md-margin-bottom-20'></div>'n'
                                </div>'n'
                                <div class='col-md-8'>'n'
                                    <p>{{content.content}}</p>'n'
                                </div>'n'
                            </div>'n'
                        </div>";

        var getTemplate = function(type){
            var template = '';
            switch(type){
                case 'googleplus':
                    template = timelineV2;
                    break;
                case 'facebook':
                    template = timelineV2;
            }
            return template;
        };

        var linker = function(scope, element, attrs){
            scope.$watch('networkCalled', function(value){
                if(value){
                    element.html(getTemplate(value));
                    $compile(element.contents())(scope);
                }
            });
        };

        return {
            restrict: "A",
            replace: true,
            link: linker,
            scope: {
                content: '=',
                networkCalled: '='
            }
        }
    })

如果你在做这样的事情

<div>{{myVariable}}</div>

然后改成这样

<div ng-bind-html="myVariable"></div>

这可能会导致错误,可以使用ngSanitize$sce解决,如文档

中所述。