在angularjs上应用jquery插件dotdotdot与分页

Question

我正在尝试设置一个指令来应用jquery 点点。我的问题是，我想要它应用到纳克-重复与分页设置的项目列表。下一页/下一页单击后，列表将发生变化。我甚至无法让初始页面与下面的代码一起工作。

到目前为止，我的代码如下：

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>

我得到了一个

点点:找不到"“的元素。

在控制台里。

任何帮助都是非常感谢的。谢谢!

Answer 1

我遇到了类似的问题，但我对列表中的每个元素都有一个指令，当我调用dotdotdot()时，它将停止将{{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()，然后编译内容(这不起作用)。

不过，这应该有效--比范围好得多。我相信它比没有$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});
    }
})