4

我正在尝试设置一个指令来应用 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：未找到“”的元素。

在控制台中。

任何帮助表示赞赏。谢谢！

4

3 回答 3

0

我遇到了类似的问题，但我对列表中的每个元素都有一个指令，当我调用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子元素是如何工作的，所以你可能还需要一些 CSSa来small让它工作（我假设你已经有了）。

于 2013-11-05T15:01:52.557 回答
0

模板

<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 。

于 2015-06-19T01:04:02.817 回答
-1

语法错误。

更改 <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});
    }
})
于 2013-10-28T19:04:14.103 回答