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.
$ 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.
$ git clone
$ npm install
$ bower install
$ gulp watch
$ git clone
$ npm install
$ bower install
$ gulp karma
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 texthm-limit
- number > 0 of maximum characters before adding "..." and the more/less text. Default: unlimitedhm-more-text
- link text for read more. Default: Read morehm-less-text
- link text for read less. Default: Read lesshm-dots-class
- css class for dotshm-link-class
- css class for links of read more/read less text
angular-read-more is licensed under the MIT license.
gulp bump
gulp build
git add .
git commit -m ""
git push
Use Github UI to create new tag and release
bower register angular-read-more git://github.com/ismarslomic/angular-read-more.git