dibari / angular-ellipsis Goto Github PK
View Code? Open in Web Editor NEWAngular directive to truncate multi-line text to visible height
License: MIT License
Angular directive to truncate multi-line text to visible height
License: MIT License
There is the worst performance if I implement it in ng-repeat..
Any help would be more appreciated.
if I bind a null value to an ellipses element, a console error is thrown:
TypeError: Cannot read property 'split' of null
at o (angular-ellipsis.js:40)
eg
$scope.something = null;
<div ellipsis ng-bind="something"></div>
Hello,
I'm having problem using angular-ellipsis on a tab navigation where elements called by the tabs are hidden or shown with ng-if.
It seems (but I'm not sure) that the directive works only for elements that are already on DOM.
Any ideas?
Thanks in advance and a star for your good work.
Daniele
Since Angular Ellipsis uses the actual value of ngBind attribute and then simply adds it to DOM using element.html(), this creates an XSS vulnerability as string can contain can script tags and is inserted as is into DOM. This can be confusing, as developers count on ngBind being sanitized using SCE service by default.
IMO, since ngBind is utilized the way it is, there needs to be a check in code to see if ngSanitized is present and if it is - utilize it.
I noticed that I was getting console errors related to "$win.bind('resize', onResize);". "bind" is undefined.
A few issues with this:
Recommend updating to "on". And, if possible, remove dependency on full jQuery.
Is there an upper limit to the amount of truncations this directive can perform? I have 300+ right now and it is taking a few seconds.
Please advise.
When I do
bower install after including the following in bower.json
"angular-ellipsis": "0.1.0"
It gives back the error as
bower angular-ellipsis#0.1.0 ENORESTARGET No tag found that was able to satisfy 0.1.0
Additional error details:
No versions found in https://github.com/dibari/angular-ellipsis.git
Is there workaround for install?
Would be great if you could use tags in the commits for versioning.
The addition of ng-bind-html has also reverted the XSS fix for ng-bind. ng-bind should escape HTML as it did before.
If we minify the current code, we got an error:
Error: [$injector:unpr] Unknown provider: aProvider <- a <- ellipsisDirective
To fix this, please use the recommanded syntax (a note on minification):
Before:
app.directive('ellipsis', function ($timeout, $window) {
After:
app.directive('ellipsis', ['$timeout', '$window', function($timeout, $window) {
Action assigned to data-ellipsis-append-click will be called more than one time if the element has nested span elements.
<p style="height: 40px" data-ellipsis data-ellipsis-append="more" data-ellipsis-append-click="<SomeAction>" ng-bind-html="<SomeExpression>">
<p>
Suppose that the bound html has span elements.. Now the Action will be called many times as the selector that binds the "ellipsis-append" click event tries to find a "span" (ellipsis-append span) assuming that this is the only span available inside the element.
For some reason, when I use this directive my pages are very slow. Not sure what could be the issue - I'm running it with HTML in the binding, perhaps that is it....
@dibari
i have content in which there are p, pre, span, ul li and other html tag. Which i am assign from the controller using ng-bind-html. In this case full content not is visible.
$scope.paragraphText = "Four score and seven years ago our <pre>fathers brought forth on this continent</pre>, a new nation, <p>conceived in Liberty</p>, <a href='http://google.com'>and</a> dedicated to the proposition that all men are created equal. Now we are engaged in a great civil war, testing whether that nation, or any nation so conceived and so dedicated, can long endure. We are met on a great battle-field of that war. We have come to dedicate a portion of that field, as a final resting place for those who here gave their lives that that nation might live."
Angular version: 9.1.4 (Ivy enabled)
When running in SSR mode (on 2.2.2 version), an error is thrown (only on server-side render):
TypeError: this.removeWindowResizeListener is not a function
It worked fine on v2.1.2.
I tried using this functionality from the bower version and it seems like it's not there yet, when I clone the repository from here it works, but only in the not-minified version
It would be great to have a new version published to bower as there are a few updates (specifically the refresh update from January) that I would like to use but I would rather not point at master and instead use a solidified version.
If I have the file extension (.pdf in this case) as a scope variable and want the file name to shrink and have ellipsis - is this possible?
On your live example I tried setting your max-height to 25 instead of 75 (using chrome dev tools) and it did not work. would it work on single line text if I tried?
Hi,
I was wondering if there is any way to tell dynamically if the directive is actually doing the 'ellipsis'-ing? I have a situation where I would like to be able to turn the ellipsis on or off.
In ui-bootstrap's popover button there is an option on the directive called popover-is-open, which allows you to open/close the thing based on a value. Is there an easy way to do the same with data-ellipsis?
Tom
In iOS there seems to be an issue with elements not having the correct element.scrollHeight when the buildEllipsis() is fired. The plugin seems to work perfectly on all desktop browsers.
The scenario I'm facing is that single line titles with a 2 line ellipsis, defined by max-height, are showing just '...' and not 'The title' until the buildEllipsis is fired again on the window resize and then the correct title appears.
The problem seems to be that thisElement[0].scrollHeight in the isOverflowed function seems to be too big at first and then later is reduced to the correct height.
I am currently getting around this issue by using the jQuery load function, but obviously this is not a desirable long-term fix.
The scenario simplified would be...
<!DOCTYPE html>
<html>
<head>
<style>
h3 {
font-size: 24px;
line-height: 28px;
max-height: 56px;
}
</style>
</head>
<body>
<h3 data-ng-bind="something" data-ellipsis></div> <!--Where $scope.something = 'A title'-->
</body>
</html>
This directive works with the height, but it would be useful for me only if it worked with width. Is this possible?
Currently, the element must have a height attribute set. Many times a max-height attribute would be better used instead. Make max-height work and have precedence over height (if height is set)
there is allready a package called angular-ellipsis on npm, which is a fork of this project... however, its an old version and doesnt seem to be maintained
as a browserify/webpack user i manage my dependencies via npm and try not to use bower
The fallback font-size will be applied before a determination is made to ellipsis the text.
I will submit a pull request with this functionality
Hi there,
Loving the current fuctionality so far. I've ran into an interesting problem that I can't seem to properly isolate.
When using angular-ellipsis within a project I am working on it works great as intended with normal languages however, when I translate something from English to Chinese (pre-compiled strings) the DOM correctly updates, digests and outputs as I would expect but the ellipsis seems to trim too much. Chrome seems to be the culprate.
The content should fill the div like so:
This is the truncate issue:
Thanks
How can I show all text on click please ? I tried to change the height of element, but I think it needs some 'restart' after then. Can you help me ? Thankx
Hi,
the minified version (both the provided one as well as a self-minified one) do not work. (in Angluar v1.4.3).
There is no error message and the directive is properly found and entered, but text does not get shortened. The non-minified version works just fine.
Could you please tag a stable version so that we can use npm to manage our dependency on this module? c.f.
http://stackoverflow.com/questions/14187956/npm-install-from-git-in-a-specific-version
videogular/bower-videogular#7 (comment)
I need to use this in angular 2.
Is there a way to use it in angluar 2?
ng-text-truncate
https://github.com/lorenooliveira/ng-text-truncate
Demo
https://rawgit.com/lorenooliveira/ng-text-truncate/master/demo1.html
Why is angular-ellipsis more active and more popular?
Hi, thanks for you work! I notice that there is an issue if a word is too long... the plugin doesn't truncate words, for example if my text is:
abcdefghijklmnopqrstuvwxyz123456789abcdefghijklmnopqrstuvwxyz123456789abcdefghijklmnopqrstuvwxyz123456789abcdefghijklmnopqrstuvwxyz123456789Four score
I can see only:
abcdefghijklmnopqrstuvwxyz123456789abcdefghijklmnopqrstuvwxyz123456789abcdefghijklmnopqrstuvwxyz123456789abcdefghijklmnopqrstuvw
There is an example with demo script:
Any ideas for a solution? Thanks again for the plugin!
Alessandro
Hi,
I have some elements in ng-show/ng-hide until the ajax call completes.
For these elements ellipsis does not work since element.is(':visible') returns false.
I thought about putting some kind of $(element).on('show', function() { to run buildEllipsis() in this case but so far haven't gotten it to work.
Thanks
This issue was introduced by the changes in PR #69 on line 156.
The find
method is used to locate the span
for the custom click action. However, as mentioned in the AngularJS documentation, the find
method in jqLite is limited to only tag names, and therefore this doesn't work anymore for apps that don't load the full jQuery.
A way to fix this would be to use querySelector
:
angular.element(element[0].querySelector('span.angular-ellipsis-append'))
.bind(...
there is a condition that, just assume that I only have several extreme long words, and each of the word isOverflowed in space I give, thus there will be only ...(ellipsisSymbol) left for my whole string.
maybe in this condition we can use substring(maybe 5 characters) of one word and then add ... instead of just leave ...?
I am using angular-ellipsis on one tab of a UI Bootstrap uib-tab.
When I click on the other tab, and resize that tab, and then click back on the tab with the angular-ellipsis elements, they then show their full text instead of the truncated ellipsis text. If you then resize the window on this tab, it then does cause the ellipsis to function properly.
How to make the ng-bind to work with ng-repeat in order to include the truncate text in looping.
I added data-ellipsis directive to spans and i am getting ellipsis and working fine when the span is having height which renders only two lines, the issue is with single line when there enough width also i am getting ellipsis after the first word
otherwise build tools pull it into the build, and it breaks stuff.
since this hasnt been updated in 2 years, I am forking it here:
https://github.com/HourlyNerd/angular-ellipsis
and registering it on bower as hn-angular-ellipsis
Is this repo actively maintained? If not I'll happily fork and maintain a new version. Noticed there are some impressive performance improvements pull requests that ought to get merged. Would you mind me forking and creating a new bower package based on your work? Or even better to add me as an admin of this repo.
Hello,
I have noticed the directive is working when placed onto
elements. So I have a few questions :
Is there a reason why it is not working on other elements such as ?
and could it be possible to make it with the actual code base ?
Thanks in advance for your help
In my application I have only 6 angular-ellipses instances on my page. However when my data loads from the service and the ng-bind gets filled, All of them show the full text for like 1/3 second.
How do I deal with that? Ng-show won't work because of the flashing only appears when the binding is loaded.
look at the following example:
for short text like "text" i get only "read more"
this is the html
<ul>
<li ng-repeat="insight in data.insights | limitTo:5 track by $index" ><i style="margin-bottom: 3px;" class="icon icons-less-info"></i>
<p class="insight-text" data-ng-bind="insight.insight" data-ellipsis data-ellipsis-append="read more"
ng-click="getFullInsights({insightData:insight})"></p>
</li>
</ul>
the css has min-width:1024px;
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.