Apply jQuery dotdotdot pagination angular repeat plugin

Question

I am trying to set a directive to use the jquery dotdotdot plugin . My problem is that I want it to apply to a list of items in ng-repeat with a set of pages. The list will change with each click of the next / previous page. I can’t even get the homepage for working with the code below.

Here is my code:

videoApp.directive('myEllip', function() {
var linkFn = function(scope, element, attrs) {
  var synopsis = angular.element(element.children());
    $(synopsis).dotdotdot({'watch':true});
};
return {
    restrict: 'A',
    link: linkFn
};
});


 <ul class="videos_all" my-ellip >
 <li ng-repeat="video in videos | filter:search | startFrom:currentPage*pageSize | limitTo:pageSize " class="videoSynopsis" >
      <p><a href ng-click="showVideo('{{video.VideoID}}')" >
      {{video.Title}}</a>
      <br><small class="muted">{{video.Description}}</small></p>        
</li>
</ul>

I get

dotdotdot: item not found for "".

in the console.

Any help is appreciated. Thanks!

Answer 1

, , dotdotdot(), angular {{title}} , ng-bind="title" . , :

videoApp.directive('myEllip', function() {
    var linkFn = function(scope, element, attrs) {
        element.dotdotdot({'watch':true});
    };
    return {
        restrict: 'A',
        link: linkFn
    };
});

html

<ul class="videos_all">
  <li my-ellip ng-repeat="video in videos | filter:search | startFrom:currentPage*pageSize | limitTo:pageSize " class="videoSynopsis" >
    <p>
      <a href ng-click="showVideo('{{video.VideoID}}')" ng-bind="video.Title"></a>
      <br/>
      <small class="muted" ng-bind="video.Description"></small>
    </p>
  </li>
</ul>

, dotdotdot , css a small (, , ).

Answer 2

<div dma-dotdotdot>{{movie.title}}</div>

(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'
                        });
                    });
                }
            };
        }
    ]);
}());

ng-bind , , . ng-bind , dotdotdot(), ( ).

- , . $watch. , , $evalAsync().

. https://docs.angularjs.org/api/ng/type/ $rootScope.Scope # $evalAsync , .

Answer 3

Syntax error.

Change <ul class="videos_all" my-ellip > to<ul class="videos_all" myEllip >

Edit:

<input ng-model="test" type="text" value="23"/>
<div  ng-repeat="i in [1,2,3]">
    <div style="width:100px; height:100px" dotdotdot ng-bind="test"></div>
</div>

app.directive('dotdotdot', function() {
 return function(scope, element, attrs) {
        $(element).dotdotdot({'watch':true});
    }
})