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

我是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>

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

最佳答案

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

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

关于javascript - angularJS:dotdotdot用​​于溢出文本和性能，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/28197197/