angularJS：dotdotdot溢出文字和性能 [英] angularJS: dotdotdot for overflow text and performance

问题描述

我是新来angularJS，也许已经写了一些不好...

I'm new to angularJS and maybe have written something bad...

但我怎么能正确执行这个插件： https://github.com/BeSite/jQuery.dotdotdot

but how could i right implement this plugin: https://github.com/BeSite/jQuery.dotdotdot

在我的桌子吗？

我的code我的编辑表单和表格现在真的不太快......真是太慢了......我做了什么错？

now with my code my edit form and table is really not too fast... really too slow... What have I done wrong?

指令：

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

即使我通过绑定的重写一遍 - 这是慢...
我做什么了？

even if i rewrite it via binding's - it's to slow... what i do wrong?

推荐答案

由于@pankajparkar在评论中指出，这实在不应该保持在 $观看。这样做执行 element.dotdotdot（）配置呼叫多次在任何给定的会议 - 例如每次关键是pressed或单击鼠标。增速放缓的一部分可能是插件本身，以及它如何管理看确实如此，但除了你应该简单地删除$表见好转：

As @pankajparkar noted in comments, this really shouldn't be maintained in a $watch. Doing so executes the element.dotdotdot() configuration call several times in any given session--for example every time a key is pressed or the mouse is clicked. Part of the slowdown could be the plugin itself and how it manages the watching it does, but aside from that you should see improvement by simply removing the $watch:

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

这篇关于angularJS：dotdotdot溢出文字和性能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！