angularJS: dotdotdot for overflow text and performance

Question

I\'m new to angularJS and maybe have written something bad...

but how could i right implement this plugin: https://github.com/BeSite/jQuery.dotdotdot

on my t

Answer 1

As @pankajparkar noted in comments, this really shouldn't be maintained in a $watch. Doing so executes the element.dotdotdot() configuration call several times in any given session--for example every time a key is pressed or the mouse is clicked. Part of the slowdown could be the plugin itself and how it manages the watching it does, but aside from that you should see improvement by simply removing the $watch:

.directive('dotdotdot', function(){
    return {
        restrict: 'A',
        link: function(scope, element, attributes) {
            element.dotdotdot({watch: true, wrap: 'letter'});
        }
    }
});

Answer 2

I had this same problem and ended up just applying a class "dotdotdot" to all elements that I wanted the jquery.dotdotdot thing to run on, and then manually calling $('.dotdotdot').dotdotdot() whenever those element updated. You have to be careful to not use a $watch or anything like that or you'll just have the same issue as if you used the directive. Not a pretty fix, but it is efficient.

Had to do this, because removing the $watch in the directive has weird side effects if you are using rawHtml binding or custom filters on the element in question.

Answer 3

Here's my attempt:

• Adds an expression to the $watch call to improve performance
• Removes { watch: true } option which needlessly polls

Directive:

app.directive('dotdotdot', ['$timeout', function($timeout) {
    return {
        restrict: 'A',
        link: function(scope, element, attributes) {

            scope.$watch(attributes.dotdotdot, function() {

                // Wait for DOM to render
                $timeout(function() {
                    element.dotdotdot();
                }, 400);
            });
        }
    }
}]);

Template:

<div dotdotdot='article.Title'>                      
      {{article.Title}}
</div>

Answer 4

Template

<li ng-repeat="movie in movies">
    <div dma-dotdotdot>{{movie.title}}</div>
</li>

Directive

(function () {
    'use strict';

    angular.module('dma.common').directive('dmaDotDotDot', [
        function dmaDotDotDot() {
            return {
                restrict: 'A',
                link: function (scope, element, attrs) {
                    scope.$evalAsync(function () {
                        element.dotdotdot({
                            wrap: 'letter'
                        });
                    });
                }
            };
        }
    ]);
}());

I tested ng-bind and it doesn't seem to work properly for me. ng-bind hides the content, then fires the dotdotdot(), then compiles the content (Which doesn't work).

Though this should work—Much better solution than scope.$watch. And I believe it preforms more consistently than the solutions listed without $evalAsync().

See https://docs.angularjs.org/api/ng/type/$rootScope.Scope#$evalAsync for more information regarding when it fires.