Question

我正在尝试设置一个指令来应用jquery插件dotdotdot。我的问题是我希望它应用于带有分页集的ng-repeat中的项目列表。列表将随每个next / prev页面单击而变化。我甚至无法使用下面的代码处理初始页面。

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

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()时，它会阻止角度将{{title}}绑定到值，所以我切换到{{1相反，它工作我想在你的情况下它可能看起来像：

ng-bind="title"

和html

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

我不确定<ul class="videos_all"> <li my-ellip ng-repeat="video in videos | filter:search | startFrom:currentPage*pageSize | limitTo:pageSize " class="videoSynopsis" > <a href ng-click="showVideo('{{video.VideoID}}')" ng-bind="video.Title"></a> </li> </ul>如何为子元素工作，所以你可能还需要一些关于dotdotdot和a的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（），然后编译内容（这不起作用）。

虽然这应该可行 - 比范围更好的解决方案。$ 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});
    }
})

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

3 个答案: