angularJS: dotdotdot 用于溢出文本和性能

Question

我是 angularJS 的新手，可能写了一些不好的东西......

但是我怎样才能正确实现这个插件：https://github.com/BeSite/jQuery.dotdotdot

在我的桌子上？

现在使用我的代码，我的编辑表单和表格真的不是太快……真的太慢了​​……我做错了什么？

指令：

.directive('dotdotdot', function(){
        return {
            restrict: 'A',
            link: function(scope, element, attributes) {
                scope.$watch(function() {
                    element.dotdotdot({watch: true, wrap: 'letter'});
                });
            }
        }
    });

和桌子：

<table id="articles" class="table table-striped articles-table">
  <thead>
    <tr class="table-row">
      <th data-ng-click="predicate = 'Date'; reverse=!reverse">Date<i ng-class="{'arrow-down' : (reverse && predicate==='Date') || (predicate!=='Date'), 'arrow-up' : !reverse && predicate==='Date'}"></i></th>
      <th data-ng-click="predicate = 'Title'; reverse=!reverse">Title<i ng-class="{'arrow-down' : (reverse && predicate==='Title') || (predicate!=='Title'), 'arrow-up' : !reverse && predicate==='Title'}"></i></th>
      <th data-sorter="false">article</th>
      <th data-sorter="false"></th>
      <th data-sorter="false"></th>
    </tr>
  </thead>
  <tbody>
    <tr data-ng-repeat="article in articles | orderBy:predicate:reverse" data-id="{{article.Id}}" class="table-row">                  
      <td class="text-nowrap">
        <div class="articles-cell">
          {{article.Date}}
        </div>                    
      </td>
      <td>
        <div class="articles-cell article-text-area" dotdotdot>                      
          {{article.Title}}
        </div>
      </td>
      <td>
        <div class="articles-cell">
          <a href="javascript:void(0)" data-ng-click="showarticle(article)" data-toggle="modal" data-target="#new-article" class="action">
            <img data-ng-src="{{article.Photo}}" data-err-src="images/no_photo.png" class="article-img img-rounded img-responsive" alt="article" />
          </a>
        </div>
      </td>
      <td>
        <div class="articles-cell" dotdotdot>
          <div class="content" data-ng-bind-html="article.Content" class="articles-row" ></div>
        </div>
      </td>
      <td class="crud-arr">
      </td>
    </tr>
  </tbody>
</table>

即使我通过绑定重写它 - 它会变慢...... 我做错了什么？

Answer 1

正如@pankajparkar 在 cmets 中指出的那样，这确实不应该在$watch 中维护。这样做会在任何给定会话中多次执行element.dotdotdot() 配置调用——例如每次按下键或单击鼠标时。减速的部分原因可能是插件本身以及它如何管理它所做的观看，但除此之外，您应该通过简单地删除 $watch 看到改进：

.directive('dotdotdot', function(){
    return {
        restrict: 'A',
        link: function(scope, element, attributes) {
            element.dotdotdot({watch: true, wrap: 'letter'});
        }
    }
});

Answer 2

模板

<li ng-repeat="movie in movies">
    <div dma-dotdotdot>{{movie.title}}</div>
</li>

指令

(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

我遇到了同样的问题，最后只是将一个类 "dotdotdot" 应用于我希望运行 jquery.dotdotdot 的所有元素，然后在这些元素更新时手动调用 $('.dotdotdot').dotdotdot()。您必须小心不要使用 $watch 或类似的东西，否则您将遇到与使用指令相同的问题。不是一个很好的解决方法，但它很有效。

必须这样做，因为如果您在相关元素上使用 rawHtml 绑定或自定义过滤器，删除指令中的 $watch 会产生奇怪的副作用。

Answer 4

这是我的尝试：

• 向 $watch 调用添加表达式以提高性能
• 删除不必要的轮询 { watch: true } 选项

指令：

app.directive('dotdotdot', ['$timeout', function($timeout) {
    return {
        restrict: 'A',
        link: function(scope, element, attributes) {

            scope.$watch(attributes.dotdotdot, function() {

                // Wait for DOM to render
                $timeout(function() {
                    element.dotdotdot();
                }, 400);
            });
        }
    }
}]);

模板：

<div dotdotdot='article.Title'>                      
      {{article.Title}}
</div>