How to add html attributes to hm-text

[naveen305]

Thanks for plugin, my data is coming dynamic it is in the form of html, and it is displaying html tags in the front end.

http://codepen.io/anon/pen/zrBpMG

Thanks!

[ismarslomic]

HTML is not preserved in output text. This can be solved by use of ngBindHtml directive. I can fix this in three weeks or so, but if you want to raise a pull request I will gladely merge it.

[ismarslomic]

Fixed in 63fd429

[sam2x]

Hey, thx for this pull, but i spotted a pretty annoying bug. This more/less parts split the text in two, so if the limit defined fall in 'html' tags, it will break the parsing.

Example case:

Text: "<h3>My TItle</h3><span style='text-align:center'> Hey this is a long text that would not appear in less part!!!! </span>"
Limit: 20
Result of less: "<h3>My TItle</h3><span"
Result of more : " style='text-align:center'> Hey this is a long text that would not appear in less part!!!! </span>"

It need more works :/, i'm trying to figure out a fix that would not require DOMParser, and others complicated algorithm to find parent tag, etc..

[sam2x]

I have came to a pseudo code to solve this issue (i have to use DOMParser unfortunaly).

Let's say the initial input text (contaning html) is htmlInput:

For lessText

     DOMParser(htmlInput)  
     -> set _current_less_length_ to 0
        -> recursively parse each node and get the length (_current_node_length_)
          -> if (_current_less_length_ + _current_node_length_ > limit)
            -> truncate current node content to (limit-current_less_length) 
            -> return & close potential pending opened tag
          -> else add node to lessText and return

moreText:

• Just set moreText to the whole htmlInput, so change

  vm.moreText = $filter('limitTo')(vm.hmText, getMoreTextLimit());

  To :

  vm.moreText =  vm.hmText;

Html Template:

• Finally hide the span of less part : <span ng-bind-html="vm.lessText" style="white-space:pre-wrap;" ng-hide="vm.toggle.show"></span>

[sam2x]

Please, take a look at my pull request.https://github.com/ismarslomic/angular-read-more/pull/23 and let me know if you can merge/update bower & package.

Regards

[ajayreddy56]

when i have

<p ng-bind-html="articleText" data-add-ellipsis></p>

is not working can you look into this

[ismarslomic]

@sam2x how would this PR affect performance and could you please add few unit tests?

[sam2x]

Hey, as i said on my PR about benchmark I don't know how to add unit test to this kind of js stuff, sry. Will let someone else do it. I have personally not seen any perf problem in my project (i use < 5000 characters, so can't really tell the way people use this plugin...).

But, this PR need a little rework :

• Animation text-transition wont work. In my code I store the 'viewable' html code in lessText and the whole html code in moreText. So, moreText need to contains the "not viewable" html code in order of the animation to works. I didnt do that, because it is more complex, and animation text-transition was an optional feature for my project.
• IMHO, the html parsing should be enabled as parameter (default value should be set to 'disabled'). That should fix your doubts/fears about performance.

Apart from that, this patch works great. Will check this week-end if i have time to enhance it ;)

[sam2x]

Ok, good news, solved all the problems :

http://codepen.io/sam2x/pen/GmYXaj

There is 2 examples (default usage, and one with the new param 'hm-html'). I also solve the animation problem i had with html code. Here my note :

Summary

• Default usage of this directive is suitable for text-only (plaintext). Using html results to tags and styles being took in account for the 'limit' parameter, which results to a bad 'truncation', and potential visual 'html' symbole junk (<>/, etc.) if truncation occurs in the middle of a tags (see the default example in codepen).
• My patch parses html, and take in account text tag for the 'limit' parameter, and split to the closest html tags, truncate text inside this tag to honor the limit if reached. I then clobbers in a "span" the rest of the overflowed html code, be careful to not use complex html code structure (ie: deep structure, etc.), but well it is unlikely...

So:

• people can still use the default behaviour if they are worrying about perf (which is unlikly to occurs) or are using only plain text.
• Else, people can use 'hm-html' parameter if they wants to have a better html parsing taking accurately the limit in account.

Please try, and let me know what you think.

Regards