从<span> </ span> <a> </a>中选择<span>

弥勒斯

我正在测试一个指令,该指令将截断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();
dfsq

由于指令编译结果进入两个同级节点,因此您应该只能通过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()); 

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

在<span> onClick中选择文本

来自分类Dev

在<span> onClick中选择文本

来自分类Dev

Javascript从div或span中选择数据

来自分类Dev

硒,选择<span>内的元素

来自分类Dev

jQuery Span选择器

来自分类Dev

使用类在jquery中选择正确的span和div

来自分类Dev

Xpath:从 <li> 内的特定 <span> 中选择内容

来自分类Dev

从<span>中的<span>获取文本

来自分类Dev

仅匹配“ <span>某物</ span> endofline”,而不匹配“ <span>某物</ span> </ span>”

来自分类Dev

选择包含隐藏的<span>值的<li>值

来自分类Dev

如何选择类的span标签中的内容

来自分类Dev

Span内的Span,href链接丢失

来自分类Dev

如何使用JavaScript在链接<a>的HTML集合内的<span>中选择文本?

来自分类Dev

从具有ID的容器中选择<span>子级并更改文本颜色

来自分类Dev

如何在多个div类和id中选择span元素?

来自分类Dev

Select2在选择呈现中对<span> text </ span>进行模板化

来自分类Dev

<span> background with font size

来自分类Dev

获取div的span标签

来自分类Dev

<span>内部<form>标记

来自分类Dev

readHTMLTable折叠span元素

来自分类Dev

<span>标志之前的文本

来自分类Dev

抓住span元素的值

来自分类Dev

提取<span>元素文本

来自分类Dev

获取<span>属性值

来自分类Dev

BeautifulSoup:<div class <span class> </ span> <span class> TEXT I Want </ span>

来自分类Dev

CSS输入[class * =“ span”]

来自分类Dev

对于<span style =

来自分类Dev

替换每个span元素

来自分类Dev

<Span>不阻止文本