在 angularjs 上应用 jquery 插件 dotdotdot 重复分页

Question

我正在尝试设置一个指令来应用 jquery 插件dotdotdot。我的问题是我希望它适用于带有分页集的 ng-repeat 中的项目列表。该列表将随着每个下一页/上一页点击而改变。我什至无法让初始页面使用下面的代码。

到目前为止，这是我的代码：

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>

我得到一个

dotdotdot：没有找到“”的元素。

在控制台中。

感谢任何帮助。谢谢！

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 是如何用于子元素的，因此您可能还需要在 a 和 small 上添加一些 CSS 才能使其正常工作（我假设您已经这样做了）。

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()，然后编译内容（这不起作用）。

虽然这应该可行——比 scope.$watch 更好的解决方案。而且我相信它比没有$evalAsync() 列出的解决方案更一致。

有关何时触发的更多信息，请参阅https://docs.angularjs.org/api/ng/type/$rootScope.Scope#$evalAsync。

Answer 3

语法错误。

更改<ul class="videos_all" my-ellip > 给<ul class="videos_all" myEllip >

编辑：

<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});
    }
})