CODEWITHSUNDEEP
angularjsangular-filters
Oleg Belousov
Oleg Belousov

Reputation: 10121

Display output that contains HTML which is returned from a filter function

Mark-up:

<div class="vpScoreInner" ng-bind-html="reason | truncate:limit:20:" ...">

JS: 

filter('truncate', function($sce){
            return function(text, overall_limit, line_limit, end){
                if (!text){
                    return;
                }
                var last_blank_index = 0;
                var line_length = 0;
                var overall_length = 0;
                var processed = '';
                var componenets = text.split(' ');
                for (var i = 0; i < componenets.length; i++){
                    c = componenets[i];
                    if (overall_limit && overall_length + c.length >= overall_limit){
                        return $sce.trustAsHtml(processed + end);
                    }

                    if(line_length < line_limit){
                        processed = !!processed ? processed + ' ' + c : c;
                        line_length = line_length + c.length;
                    }
                    else{
                        processed = processed + '<br>'
                        line_length = 0
                    }
                    overall_length = overall_length + c.length;
                }

                return $sce.trustAsHtml(processed);
            }
      });

This filter I've implemented both truncates the text if needed, and splits it to lines of no more than x characters without cutting words in the middle.

Problem is that with normal ng-bind
tags are being rendered as plain text, and using the relatively-new ng-bind-html, the text is not being rendered at all.

Upvotes: 2

Views: 660

Answers (1)

m.e.conroy
m.e.conroy

Reputation: 3538

I don't think you need to use $sce here, the value returned by your filter is returned directly to the ngBindHtml directive which in turn will clean and render the HTML for you.

If you look at the AngularJS documentation (https://docs.angularjs.org/api/ng/service/$sce) for $sce.trustAsHTML it returns an object that needs to be passed to $sce.getTrustedHTML

Returns

An object that can be passed to $sce.getTrustedHtml(value) to obtain 
the original value. (privileged directives only accept expressions that 
are either literal constants or are the return value of $sce.trustAs.)

I think you just need to return the straight up HTML string you create and let ngBindHTML do the rest.

EDIT: Here's a simple fiddle of a filter that chops up a string into equal sizes and inserts a double break: http://jsfiddle.net/mikeeconroy/LfvZf/

Upvotes: 1

Related Questions