Javascript 选择<；span>；out auf<；span></span>&书信电报；a></a>；

我正在测试一个指令，它在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>

测试指令：

.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());


  });

更好

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

---

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

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

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

---

然后，单击切换按钮时，只需在span上切换类“show”。

由于指令编译会导致两个同级节点，您应该只能通过0-index获取span（它将是HTMLSPANENT）：

var textCollapse=''；
var el=$compile（textCollapse）（范围）；
范围。$digest（）；
var span=angular.element（el[0].子元素[0]）；
var link=angular.element（el[0].子元素[1]）；
log（span.html（））；

Show

toggleLength（）

函数。尝试了您的解决方案，但我仍然得到了

。查看我更新的问题几乎，还需要一个

children[0]

selector:

var span=angular.element（el[0].children[0].children[0]），但由于你让我走上了正确的轨道，我将选择正确的答案。这将在一行后删除文本，这不是我希望通过此指令实现的目标。
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();

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

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

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());