选择<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个字符，我需要只选择元素。我该怎么做？我试过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索引获取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;
}

text-overflow.asp

然后点击切换按钮时，只需在span上切换类"show“即可。