Question

我有范围变量。像

$scope.demo='<h1>This is test</h1>';

我可以使用ng-bind-html

来绑定html

<p ng-bind-html="demo"></p>

它的工作正常，但如何在{{ .. }}

中绑定html

Answer 1

您需要使用$sce服务清理html，这需要在您的应用中注入ngSanitize模块。

基本上你需要允许html作为trustAsHtml $sce服务的$scope.demo = $sce.trustAsHtml('<h1>This is test</h1>');方法。

<强>代码

app.filter('trsustedhtml', function($sce) { 
    return $sce.trustAsHtml; 
});

更好的方式

为了使它更好，您可以创建自定义过滤器并重用该代码

<p ng-bind-html="demo| trsustedhtml"></p>

<强>标记

        <?php 

            if(have_posts()):

                while(have_posts()): the_post();

                $counter = 1;

                ?>

                <?php if($counter == 1){ ?>

                    <div class="new-row">

                    <div class="boxes picture-box contact-smaller-box">

                    <a href="<?php the_permalink(); ?>"><?php the_post_thumbnail(); ?></a>

                    </div><!--/.picture box-->




                    <div class="boxes white-box contact-smaller-box">

                    <div class="box-inner right-side">

                    <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>

                    <p><?php echo substr(get_the_excerpt(), 0,70); ?></p>
                    <a href="<?php the_permalink(); ?>" title="find out more" class="find-out pink-link">Read More</a>

                    </div><!--/.box inner-->

                    <div class="arrow arrow-left"><img src="..."></div>


                    </div><!--/.white box-->

                    </div><!--/.new row-->

                    <?php $counter = $counter++; ?>


                <?php } if($counter == 2){?>


                    <!-- second section of the blog post content -->



                    <div class="new-row">

                    <div class="boxes pink-box contact-smaller-box">

                    <div class="box-inner">

                    <h2><?php the_title(); ?></h2>

                    <p><?php echo substr(get_the_excerpt(), 0,70); ?></p>

                    <a href="<?php the_permalink(); ?>" title="find out more" class="find-out purple-link">Read More</a>

                    </div><!--/.box inner-->

                    <div class="arrow arrow-right"><img src="..."></div>


                    </div><!--/.pink box-->





                    <div class="boxes picture-box contact-smaller-box">

                    <img src="..." alt="hearing aids for adults">

                    </div><!--/.picture box-->

                    </div><!--/.new row-->


                <?php } ?>


            <?php

                endwhile;

            endif;

        ?>

Answer 2

ng-bind html只接受文本，你必须删除安全控件

<p ng-bind-html-unsafe="demo"></p>

如何在angularjs中绑定html

2 个答案: