Question

我有一个div，我有一个指令绑定HTML内容并编译它（类似ng-bing-html指令，但也编译html以允许插入自定义指令）。 HTML代码如下所示：

<div ng-repeat="text in texts">
     <div class="content-display" 
          bind-html-compile="text | filterThatOutputsHTMLCodeWithCustomDirectives | nl2br">
     </div>
</div>

问题是我需要只显示每个content-display div的受限制部分，并且有一个＆＃34;阅读更多...＆＃34;将相应的div扩展为其完整大小的按钮。但我不能截断div中绑定的文本，因为它不仅包含文本，还包含HTML标记/指令。

我发现了这个JQuery代码，可以实现我想要的视觉效果：https://stackoverflow.com/a/7590517/2459955（JSFiddle here http://jsfiddle.net/rlemon/g8c8A/6/）

问题是它不符合Angular标准，而且是纯粹的JQuery。由于我绑定HTML内容的div位于ng-repeat内...当texts数组异步刷新时，此解决方案无效。

您是否认为有一种方法可以获得与之前链接的答案相同的行为，但是更多＆＃34;符合Angular＆＃34;并自动将其应用于content-display添加的每个ng-repeat div？

Answer 1

考虑使用类似于此处描述的CSS方法：https://css-tricks.com/text-fade-read-more/

<强> CSS：

.sidebar-box {
  max-height: 120px;
  position: relative;
  overflow: hidden;
}
.sidebar-box .read-more { 
  position: absolute; 
  bottom: 0; 
  left: 0;
  width: 100%; 
  text-align: center; 
  margin: 0; padding: 30px 0; 

  /* "transparent" only works here because == rgba(0,0,0,0) */
  background-image: linear-gradient(to bottom, transparent, black);
}

您可以为read more按钮创建一个AngularJS指令，而不是使用jQuery进行更多阅读＆＃34;揭示＆＃34 ;.

指令（未经测试）：

angular.module('myApp')
    .directive('readMore', readMoreDirective);

function readMoreDirective() {
    return function(scope, iElement) {
        scope.$on('click', function() {
            var totalHeight = 0;
            var parentElement = iElement.parent();
            var grandparentElement = parentElement.parent();
            var parentSiblings = grandparentElement.find("p:not('.read-more')");

            // measure how tall inside should be by adding together heights
            // of all inside paragraphs (except read-more paragraph)
            angular.forEach(parentSiblings, function(ps) {
                totalHeight += ps.outerHeight();
            });

            grandparentElement.css({
                // Set height to prevent instant jumpdown when max height is removed
                height: grandparentElement.height(),
                'max-height': 9999
            })
            .animate({
                height: totalHeight
            });
        });
    };
}

Answer 2

一种干净的方法是使用一个类来截断div，并删除它以显示所有文本：

角度范围：

$scope.truncated = []; // make new array containing the state of the div (truncated or not)
for(var i; i < texts.length -1; i++){
    $scope.truncated.push(0); // fill it with 0 (false by default)
}
$scope.textTruncate = function(index) {
    $scope.truncated[index] = !$scope.truncated[index]; // toggle this value
}

角度观点

<div ng-repeat="text in texts" ng-class="{truncated: truncated[$index]}">
    <div class="content-display" 
          bind-html-compile="text | filterThatOutputsHTMLCodeWithCustomDirectives | nl2br">
     </div>
    <button ng-click="textTruncate($index)" >Read more</button>
</div>

CSS：

.content-display {
    max-height: 1000px; /* should be your max text height */
    overflow: hidden;
    transition: max-height .3s ease;
}
.truncated .content-display {
    max-height: 100px; /* or whatever max height you need */

}

这就是我的想法，不确定它是否是最有效的方法。

Answer 3

尝试在 ng-repeat

中使用<p data-dd-collapse-text="100">{{veryLongText}}</p>

文档 Here

Answer 4

最后，我最后使用了这个答案中给出的方法稍加修改：https://stackoverflow.com/a/7590517/2459955

确实，因为我有一个ng-repeat在DOM中添加更多div，$elem.each()函数不会触发这些额外的div。解决方案是使用名为jquery.initialize的JQuery插件。

此插件提供的$elem.initialize()函数与$elem.each()具有完全相同的语法，但是当将它们添加到DOM时，initialize（）将自动再次调用与提供的选择器匹配的新项目的回调。它使用 MutationObserver 。

最终代码如下所示。我在module.run()条目中有一些JQuery代码（在模块初始化时运行一次）：

var slideHeight = 400;
$(".content-collapse").initialize(function() {
  var $this = $(this);
  var $wrap = $this.children(".content-display");
  var defHeight = $wrap.height();
  if (defHeight >= slideHeight) {
    var $readMore = $this.find(".read-more");
    var $gradientContainer = $this.find(".gradient-container");
    $gradientContainer.append('<div class="gradient"></div>');
    $wrap.css("height", slideHeight + "px");
    $readMore.append("<a href='#'>Read more</a>");
    $readMore.children("a").bind("click", function(event) {
      var curHeight = $wrap.height();
      if (curHeight == slideHeight) {
        $wrap.animate({
          height: defHeight
        }, "normal");
        $(this).text("Read less");
        $gradientContainer.children(".gradient").fadeOut();
      } else {
        $wrap.animate({
          height: slideHeight
        }, "normal");
        $(this).text("Read more");
        $gradientContainer.children(".gradient").fadeIn();
      }
      return false;
    });
  }
});

以及相应的HTML（为演示目的而清理）：

 <div class="content-collapse" ng-repeat="text in texts">
    <div class="content-display" bind-html-compile="::text"></div>
    <div class="gradient-container"></div>
    <div class="read-more"></div>
 </div>

此解决方案允许平滑的展开/折叠动画，在没有任何CSS黑客的情况下正常工作，它仅在超出所需大小限制的答案上添加“阅读更多”按钮，即使texts数组是由异步请求修改。

Angular read-more按钮隐藏（不截断）div内容

4 个答案: