Выберите <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 --> 

' 

Edit: Понял, правильный выбор будет

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

еще лучше

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

Answer 1

Поскольку директива результатов компиляции в двух родственных узлов, вы должны быть в состоянии захватить промежуток только 0-индекса (это будет 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

Вы могли бы избежать Javascript вообще, добавив следующий атрибут CSS:

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

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

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

Затем просто переключите класс «показать» на промежутке, когда нажата кнопка переключения.