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

Question

I have a list of posts which loads perfect, the entire content of each post. The html post content is a string in database column. Now I want to create a read more link at the position that I desire and only show a post preview in the list (a part of the html content). To accomplish that I write a comment inside the posts it´s the point to cut the content in order to preview.

How can I manipulate the content before the ng-bind-html loads it? I need to detect the first comment and clean the content html document. I´m making tests in jquery but i would like to know how to do it on the angular way.

I think that a filter inside the ng-bind-html expression can do the work. But i don´t now how to manipulate the html string inside the filter. Manipulate like jquery syntax because i need to remove a lot of tags and do some stuff.

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

Thanks

Answer 1

You can add a function that will be executed during ng-bind-html and get access to your string by using sanitise service $sce . See the details on $sanitise service.

Inside the ng-bind-html you can manipulate the DOM using jqlite and native javascript (by using $document wrapper). If the manipulations are too complex, I'd use jquery directly. To do that you have to just include it before angular in your index.html and use angular.element instead of $