在AngularJS中多看或少看

我遇到了一些用于在AngularJS中添加文本的代码。但是，解析html时会出现问题。下面是显示文本的示例代码

<span class="text" ng-bind-html="parseTrustedHtml(profile.bio)"></span>

如果没有解析html，AngularJS的在线教程就可以工作。也就是说，

{{profile.bio}

但这不是我想要的

有没有什么方法我错过了，我可以在哪里设置它，这样在一个比方说，500个字符和“少看”选项之后就有一个“多看”选项

这可以帮助您：

尝试用

属性装饰

app.directive('readMore', function() {
  return {
    restrict: 'A',
    transclude: true,
    replace: true,
    template: '<p></p>',
    scope: {
      moreText: '@',
      lessText: '@',
      words: '@',
      ellipsis: '@',
      char: '@',
      limit: '@',
      content: '@'
    },
    link: function(scope, elem, attr, ctrl, transclude) {
      var moreText = angular.isUndefined(scope.moreText) ? ' <a class="read-more">Read More...</a>' : ' <a class="read-more">' + scope.moreText + '</a>',
        lessText = angular.isUndefined(scope.lessText) ? ' <a class="read-less">Less ^</a>' : ' <a class="read-less">' + scope.lessText + '</a>',
        ellipsis = angular.isUndefined(scope.ellipsis) ? '' : scope.ellipsis,
        limit = angular.isUndefined(scope.limit) ? 150 : scope.limit;

      attr.$observe('content', function(str) {
        readmore(str);
      });

      transclude(scope.$parent, function(clone, scope) {
        readmore(clone.text().trim());
      });

      function readmore(text) {

        var text = text,
          orig = text,
          regex = /\s+/gi,
          charCount = text.length,
          wordCount = text.trim().replace(regex, ' ').split(' ').length,
          countBy = 'char',
          count = charCount,
          foundWords = [],
          markup = text,
          more = '';

        if (!angular.isUndefined(attr.words)) {
          countBy = 'words';
          count = wordCount;
        }

        if (countBy === 'words') { // Count words

          foundWords = text.split(/\s+/);

          if (foundWords.length > limit) {
            text = foundWords.slice(0, limit).join(' ') + ellipsis;
            more = foundWords.slice(limit, count).join(' ');
            markup = text + moreText + '<span class="more-text">' + more + lessText + '</span>';
          }

        } else { // Count characters

          if (count > limit) {
            text = orig.slice(0, limit) + ellipsis;
            more = orig.slice(limit, count);
            markup = text + moreText + '<span class="more-text">' + more + lessText + '</span>';
          }
        }

        elem.append(markup);
        elem.find('.read-more').on('click', function() {
          $(this).hide();
          elem.find('.more-text').addClass('show').slideDown();
        });
        elem.find('.read-less').on('click', function() {
          elem.find('.read-more').show();
          elem.find('.more-text').hide().removeClass('show');
        });

      }
    }
  };

app.directive（'readMore'，function（）{
返回{
限制：“A”，
是的，
替换：正确，
模板：“
”，
范围：{
moreText:“@”，
lessText:“@”，
字：“@”，
省略号：“@”，
字符：“@”，
限制：“@”，
内容：“@”
},
链接：功能（范围、元素、属性、控制、转移）{
var moreText=angular.isUndefined（scope.moreText）？“
这可以帮助您：


尝试用
属性装饰

app.directive('readMore', function() {
  return {
    restrict: 'A',
    transclude: true,
    replace: true,
    template: '<p></p>',
    scope: {
      moreText: '@',
      lessText: '@',
      words: '@',
      ellipsis: '@',
      char: '@',
      limit: '@',
      content: '@'
    },
    link: function(scope, elem, attr, ctrl, transclude) {
      var moreText = angular.isUndefined(scope.moreText) ? ' <a class="read-more">Read More...</a>' : ' <a class="read-more">' + scope.moreText + '</a>',
        lessText = angular.isUndefined(scope.lessText) ? ' <a class="read-less">Less ^</a>' : ' <a class="read-less">' + scope.lessText + '</a>',
        ellipsis = angular.isUndefined(scope.ellipsis) ? '' : scope.ellipsis,
        limit = angular.isUndefined(scope.limit) ? 150 : scope.limit;

      attr.$observe('content', function(str) {
        readmore(str);
      });

      transclude(scope.$parent, function(clone, scope) {
        readmore(clone.text().trim());
      });

      function readmore(text) {

        var text = text,
          orig = text,
          regex = /\s+/gi,
          charCount = text.length,
          wordCount = text.trim().replace(regex, ' ').split(' ').length,
          countBy = 'char',
          count = charCount,
          foundWords = [],
          markup = text,
          more = '';

        if (!angular.isUndefined(attr.words)) {
          countBy = 'words';
          count = wordCount;
        }

        if (countBy === 'words') { // Count words

          foundWords = text.split(/\s+/);

          if (foundWords.length > limit) {
            text = foundWords.slice(0, limit).join(' ') + ellipsis;
            more = foundWords.slice(limit, count).join(' ');
            markup = text + moreText + '<span class="more-text">' + more + lessText + '</span>';
          }

        } else { // Count characters

          if (count > limit) {
            text = orig.slice(0, limit) + ellipsis;
            more = orig.slice(limit, count);
            markup = text + moreText + '<span class="more-text">' + more + lessText + '</span>';
          }
        }

        elem.append(markup);
        elem.find('.read-more').on('click', function() {
          $(this).hide();
          elem.find('.more-text').addClass('show').slideDown();
        });
        elem.find('.read-less').on('click', function() {
          elem.find('.read-more').show();
          elem.find('.more-text').hide().removeClass('show');
        });

      }
    }
  };

app.directive（'readMore'，function（）{
返回{
限制：“A”，
是的，
替换：正确，
模板：“
”，
范围：{
moreText:“@”，
lessText:“@”，
字：“@”，
省略号：“@”，
字符：“@”，
限制：“@”，
内容：“@”
},
链接：功能（范围、元素、属性、控制、转移）{
var moreText=angular.isUndefined（scope.moreText）？“
我能想到的一个简单方法是应用过滤器
limitTo:limitvar

{{ 'some text' | limitTo:2 }} // displays "so"

然后单击
ng
，相应地更改
limitvar
变量。过滤器将限制由
limitvar
设置的要查看的字符数

更新
还是有点幼稚，它不能解决html标签的问题，但我想不出一个正确的方法：）

我能想到的一个简单方法是应用过滤器
limito:limitvar

{{ 'some text' | limitTo:2 }} // displays "so"

然后单击
ng
，相应地更改
limitvar
变量。过滤器将限制由
limitvar
设置的要查看的字符数

更新
还是有点幼稚，它不能解决html标签的问题，但我想不出一个正确的方法：）

是一个很小的angularjs指令，用于将任何列表转换为视图更多更少的列表。这也适用于延迟列表。与jQuery或其他库没有外部依赖关系

您只需将元素作为要转换的列表中的最后一项放置：

<ul>
 <li>item 1</li>
 <li>item 2</li>
 ...
 <view-more-less />
</ul>


项目1
项目2
...

是一个很小的angularjs指令，用于将任何列表转换为视图更多更少的列表。这也适用于延迟列表。与jQuery或其他库没有外部依赖关系

您只需将元素作为要转换的列表中的最后一项放置：

<ul>
 <li>item 1</li>
 <li>item 2</li>
 ...
 <view-more-less />
</ul>


项目1
项目2
...

在控制器中

$scope.numLimit=100;
$scope.numLimitFlag = false;
$scope.readMore=function(flag){
  if(flag){
    $scope.numLimit=10000;
    $scope.numLimitFlag = flag;
  } else {
    $scope.numLimit=100;
    $scope.numLimitFlag = flag;
  }
};

在Html中

<span style="font-size:15px;">
  <label><b>Name</b></label>
  <b>{{myName | limitTo:numLimit}}</b>
  <a type='button' ng-if="!numLimitFlag" ng-click="readMore(true)">Read more</a> 
  <a type='button' ng-if="numLimitFlag" ng-click="readMore(false)">Read less</a>
</span>


名称
{{myName}limito:numLimit}
阅读更多
少读
在控制器中

$scope.numLimit=100;
$scope.numLimitFlag = false;
$scope.readMore=function(flag){
  if(flag){
    $scope.numLimit=10000;
    $scope.numLimitFlag = flag;
  } else {
    $scope.numLimit=100;
    $scope.numLimitFlag = flag;
  }
};

在Html中

<span style="font-size:15px;">
  <label><b>Name</b></label>
  <b>{{myName | limitTo:numLimit}}</b>
  <a type='button' ng-if="!numLimitFlag" ng-click="readMore(true)">Read more</a> 
  <a type='button' ng-if="numLimitFlag" ng-click="readMore(false)">Read less</a>
</span>


名称
{{myName}limito:numLimit}
阅读更多
少读
实际上，您不需要解析HTML。如果您在主模块中包含
ngSanitize
，则
ng bind HTML
指令将自动将您的HTML解析为受信任的。我不明白您在这里问什么。您的问题是关于显示HTML，还是关于将文本截断为500个字符，或者是什么？告诉我们您有什么问题吗你想要实现什么，问题是什么。这是关于缩短html中显示的文本，并使用“查看更多”要扩展。查看这个，实际上您不需要解析HTML。如果您在主模块中包含
ngSanitize
，则
ng bind HTML
指令将自动将您的HTML解析为受信任的。我不明白您在这里问什么。您的问题是关于显示HTML，还是关于将文本截断为500个字符r什么？告诉我们你想要实现什么，问题是什么。这是关于缩短html中显示的文本，并使用“查看更多信息”这是很容易实现的，不是我想要的。不过谢谢你：）啊哈！我现在明白你的问题了。对不起，不相关的答案：）这是很容易实现的，不是我想要的。谢谢：）啊哈！我现在明白你的问题了。对不起，不相关的答案：）不正确e这是否有效。我将看看会发生什么：）不确定这是否有效。我将看看会发生什么：）