How to use angular-dotdotdot?

Question

I am using dotdotdot seems to bea cool plug-in... however, I need to use it an angular, is not working if new elements are loaded (via http.get <> ng-repeat)...

So I find that there is an angular-dotdotdot... How to use it? is not very clear...

Suppose I have the classical usage of dotdotdot like this:

// ellipsis body to 4 lines height
var ellipsis = $(".ellipsis-case-body");
var nrLines = 4;
var ellHeight = parseInt(ellipsis.css('line-height'), 10) * nrLines;
ellipsis.dotdotdot({ height: ellHeight });

// ellipsis title to 1 line height
ellipsis = $(".ellipsis-case-title");
nrLines = 1;
ellHeight = parseInt(ellipsis.css('line-height'), 10) * nrLines;
ellipsis.dotdotdot({ height: ellHeight });

How to use it with angular?

In their documentation

$scope.myText = 'some really long text';

Template:

<p dotdotdot='myText'>{{myText}}</p>

But how to set options?

Answer 1

It doesn't look like you can. This is the directive source code, from GitHub:

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

                // We must pass in the scope binding, e.g. dotdotdot='myText' for scope.myText
                scope.$watch(attributes.dotdotdot, function() {

                    // Wait for DOM to render
                    // NB. Don't use { watch: true } option in dotdotdot as it needlessly polls
                    $timeout(function() {
                        element.dotdotdot();
                    }, 400);
                });
            }
        }
}]);

Note that there is nothing being passed to .dotdotdot().

You will probably want to fork this or just write your own.