在Angular中制作博客文章的html预览.js使用ng-bind-html

Make html preview of blog post in Angular.js using ng-bind-html

本文关键字:html 预览 js ng-bind-html 使用 文章 Angular      更新时间:2023-09-26

我有一个加载完美的帖子列表,每个帖子的全部内容。html 帖子内容是数据库列中的字符串。现在我想在我想要的位置创建一个阅读更多链接,并且只在列表中显示帖子预览(html内容的一部分)。为此,我在帖子中写了一条评论,重点是剪切内容以进行预览。

如何在ng-bind-html加载内容之前操作内容?我需要检测第一条评论并清理内容 html 文档。我正在jquery进行测试,但我想知道如何以角度的方式进行测试。

我认为ng-bind-html表达式中的过滤器可以完成这项工作。但是我现在不知道如何在过滤器中操作 html 字符串。像jquery语法一样操作,因为我需要删除很多标签并做一些事情。

<script>
    $(function() {
        var com = $("*")
           .contents()
           .filter(function(){ return this.nodeType == 8;})
           .first();
        com.nextAll().remove();
    });
</script>

谢谢

您可以添加一个将在ng-bind-html期间执行的函数,并使用 sanitise 服务$sce访问您的字符串。请参阅有关$sanitise服务的详细信息。

ng-bind-html中,您可以使用jqlite和本机javascript(通过使用$document包装器)来操作DOM。如果操作太复杂,我会直接使用 jquery。要做到这一点,你必须在索引中的角度之前包含它.html并使用angular.element而不是$