选择 <span> out auf <span></span><a></a>

Question

我正在测试一个指令，它会在 200 个字符后截断文本。它改变了这个：

<span mw-text-collapse="long text long text long text
 long text long text long text long text long text long 
 text long text long text long text long text long text 
 long text long text long text long text long text long 
 text long text long text long text long text long text 
 long text long text long text long text long text long 
 text long text long text long text long text long text 
 long text long text long text long text long text long 
 text long text long text long text long text long text 
 long text long text long text long text long text long 
 text long text" class="ng-scope ng-isolate-scope"></span>

到这里：

 <span class="line-break ng-binding">
    long text long text long text long text long 
    text long text long text long text long text 
    long text long text long text long text long 
    text long text long text long text long text 
    long text long text ...
 </span>
 <a ng-if="showButton" ng-click="toggleLength()" style="cursor: pointer" class="ng-binding ng-scope">
    {{ showLessOrMore() | i18n }}
 </a>

为了检查是否真的有 200 个字符我只需要选择 span 元素。我怎样才能做到这一点？我尝试了el.find('span')，但没有成功。

这是我的测试：

describe('mwTextCollapse', function () {

  var longText = 'long text long text long text long text long text ' +
    'long text long text long text long text long text long text long text ' +
    'long text long text long text long text long text long text long text ' +
    'long text long text long text long text long text long text long text ' +
    'long text long text long text long text long text long text long text ' +
    'long text long text long text long text long text long text long text ' +
    'long text long text long text long text long text long text long text ' +
    'long text long text long text long text long text long text long text';


  fit('text should have a default length of 200 chars', function () {
    var textCollapse = '<span mw-text-collapse="' + longText + '"></span>';
    var el = $compile(textCollapse)(scope);
    scope.$digest();

    console.log(el.html());   
  });
});

要测试的指令：

.directive('mwTextCollapse', function ($filter) {
  return {
    restrict: 'A',
    scope: {
      mwTextCollapse: '@',
      length: '=',
      markdown: '='
    },
    templateUrl: 'modules/ui/templates/mwComponents/mwTextCollapse.html',
    link: function (scope) {

      // set default length
      if( scope.length && typeof scope.length === 'number' ) {
        scope.defaultLength = scope.length;
      } else {
        scope.defaultLength = 200;
      }

      // set start length for filter
      scope.filterLength = scope.defaultLength;

      // apply filter length to text
      scope.text = function(){
        return $filter('reduceStringTo')(
          scope.mwTextCollapse, scope.filterLength
        );
      };

      // show Button if text is longer than desired
      scope.showButton = false;
      if( scope.mwTextCollapse.length > scope.defaultLength ) {
        scope.showButton = true;
      }

      // set button to "show more" or "show less"
      scope.showLessOrMore = function () {
        if( scope.filterLength === scope.defaultLength ){
          return 'common.showMore';
        } else {
          return 'common.showLess';
        }
      };

      // collapse/expand text by setting filter length
      scope.toggleLength = function () {
        if( scope.filterLength === scope.defaultLength ) {
          delete scope.filterLength;
        } else {
          scope.filterLength = scope.defaultLength;
        }
      };
    }
  };
})

我试过 dfsq 解决方案：

 fit('text should have a default length of 200 chars', function () {
    var textCollapse = '<span mw-text-collapse="' + longText + '"></span>';
    var el = $compile(textCollapse)(scope);
    scope.$digest();

    var span = angular.element(el[0]);
    console.log(span.html());


  });

仍然产生<a></a> :(

INFO [PhantomJS 1.9.8 (Mac OS X 0.0.0)]: Connected on socket wIMQX3-7dA2T5nIr11PI with id 86239756
LOG: '<!-- ngIf: markdown -->

<!-- ngIf: !markdown --><div ng-if="!markdown" class="ng-scope">
  <span class="line-break ng-binding">long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text ...</span>
  <!-- ngIf: showButton --><a ng-if="showButton" ng-click="toggleLength()" style="cursor: pointer" class="ng-binding ng-scope">{{ showLessOrMore() | i18n }}</a><!-- end ngIf: showButton -->
</div><!-- end ngIf: !markdown -->

'

编辑：知道了，正确的选择应该是

var span = angular.element(el[0].children[0].children[0]);

更好

var span = el.find('span').text();

Answer 1

由于指令编译结果为两个兄弟节点，你应该只能通过 0-index 来抓取 span（它将是 HTMLSpanElement）：

var textCollapse = '<span mw-text-collapse="' + longText + '"></span>';
var el = $compile(textCollapse)(scope);
scope.$digest();

var span = angular.element(el[0].children[0]);
var link = angular.element(el[0].children[1]);

console.log(span.html()); 

Answer 2

您可以通过添加以下 CSS 属性来完全避免使用 Javascript：

.ng-scope {
     text-overflow: ellipsis;
}

.ng-scope.show {
     text-overflow:clip;
}

http://www.w3schools.com/cssref/css3_pr_text-overflow.asp

然后，当点击切换按钮时，只需在跨度上切换类“显示”。