prashant-shukla / angular-read-more

AngularJS Read More Directive - without jQuery dependency

hm-read-more

AngularJS directive that limit text and adds read more / read less links to your text when it exeeds certain limit of characters. No requirements to JQuery. Angular animations are used for fade in/out.

Codepen demo

Codepen demo

Install client side

$ bower install angular-read-more --save-dev 

Note that angular-sanitize is required since this directive is allowing HTML tags to be used in text.

Run example locally

$ git clone
$ npm install
$ bower install
$ gulp watch

Test locally

$ git clone
$ npm install
$ bower install
$ gulp karma

How to use in HTML

Include JS script

<script src="//cdnjs.cloudflare.com/ajax/libs/angular-sanitize/1.6.4/angular-sanitize.min.js"></script>
<script src="/bower_components/angular-read-more/readmore.min.js"></script>

Add the module to your app,

angular.module("app", ["hm.readmore"]);

As element

<hm-read-more
		hm-text="{{ text }}" 
		hm-limit="100" 
		hm-more-text="read more" 
		hm-less-text="read less"
		hm-dots-class="dots"
        hm-link-class="links">
</hm-read-more>

As attribute

<div hm-read-more
		hm-text="{{ text }}" 
		hm-limit="100" 
		hm-more-text="read more" 
		hm-less-text="read less"
		hm-dots-class="dots"
        hm-link-class="links">
</div>

• hm-text - full text
• hm-limit - number > 0 of maximum characters before adding "..." and the more/less text. Default: unlimited
• hm-more-text - link text for read more. Default: Read more
• hm-less-text - link text for read less. Default: Read less
• hm-dots-class - css class for dots
• hm-link-class - css class for links of read more/read less text

License

angular-read-more is licensed under the MIT license.

Release new Github and Bower version

gulp bump
gulp build
git add .
git commit -m ""
git push

Use Github UI to create new tag and release

Register bower package for the first time

bower register angular-read-more git://github.com/ismarslomic/angular-read-more.git