模板

Question

我想创建一个包含更多文字的链接。如果段落中有超过3行，则此链接应该是可见的，单击此链接会显示所有行。

Answer 1

我想做同样的事情，所以我创建了一个指令。看看这里：https://gist.github.com/doukasd/0744566c5494ebc8643f

用法非常简单：

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

其中100是您要指定的字符数限制。

更新： dd-text-collapse

Answer 2

有关详细信息，您可以使用angular limitTo过滤器将段落限制为字符长度，而不是将段落限制为行号。

您可以使用以下内容：

in html

<p> {{myString | limitTo:numLimit}} </p>
<button type='button' ng-click="readMore()">read more</button>

控制器中的

$scope.numLimit=200;
$scope.readMore=function(){
$scope.numLimit=10000;
};

Answer 3

根据这里的一些信息，我将更多/更少的实现放在一起。

指令定义 showMore.js

.directive('showMore', 
function(){
    return {
        templateUrl: 'showMore.html',
        restrict: 'A',
        transclude: true,
        scope:{
            'showMoreHeight': '@'
        },
        controller: ['$scope', '$element', '$interval', function($scope, $element, $interval) {

            $scope.expanded = false;

            $interval(function(){
                renderStyles();
            }, 300);

            $scope.expandable = false;
            function renderStyles(){
                if($element.height() >= $scope.showMoreHeight && $scope.expanded === false){
                    $scope.expandable = true;
                }
            }

            $scope.showLessStyle = {
                'max-height': $scope.showMoreHeight + 'px',
                'overflow': 'hidden'
            };

        }]
    };
});

showMore.html

<span>
    <div ng-style='showLessStyle' ng-hide='expanded' ng-transclude>
    </div>
    <div ng-show='expanded' ng-transclude>
    </div>
    <a style='float:right;' ng-hide='expanded || !expandable' ng-click='expanded = !expanded' localize>show more</a>
    <a style='float:right;' ng-show='expanded && expandable' ng-click='expanded = !expanded'>show less</a>
</span>

使用相当简单，只需转换您希望显示更多/更少

的内容

USEAGE：

<div show-more show-more-height='150'>
    <div class='showMoreContent'></div>
</div>

我希望这有点帮助！

Answer 4

可以有一些解决方法。

基本理念就是这样

 1. at first, use javascript to calculate the original height
 2. if higher than 3 lines , set the overflow to hidden and show a button. The button is used to toggle state
 3.  if not,  do nothing

关于按钮。

如果按钮超出文本区域，我认为这对你没问题。如果您需要元素内联按钮，则有2种可能性。

如果你想把它固定在右下角，为按钮创建渐变背景，淡出效果。它看起来很好很简单。

这里是jsfiddle：http://jsfiddle.net/sunderls/HYHZ6/。 每次切换状态时，实际上都会更改元素的类。
如果您想在文本结束后立即使用它？这有点棘手，因为即使文字高度是3行，你也无法确定它是否保持3行高度，然后在旁边添加一个按钮它

我认为一种方法是使用Range API来计算段落尺寸，（我在我的collamark.com上使用了api，它功能强大但不同的浏览器有不同的行为）。其实你可以动态获取每一行的尺寸。一些人向后循环，你可以得到文本的适当子串，以折叠模式显示，适合3行高度用一个按钮。（api doc在这里： https://developer.mozilla.org/en-US/docs/Web/API/range）

所以现在每当你切换状态时，你实际上是改变了文本。不是班级。

这是在Angular

模板

首先，这种功能是一个独立的模块，您可以在任何地方重复使用，因此在您的模板中，我们创建一个新的指令autoFolded，如下所示：

<auto-folded>
    <p>Some text here, maybe long maybe short</p>
</auto-folded>

directive.coffee

然后我们处理指令定义中的所有逻辑（抱歉在咖啡中写作）

directive('autoFolded',[
 '$window'
($window) ->
    return {
        restrict: 'E'
        transclude: true
        template: '<div class="auto-folded"><div ng-transclude></div><a href ng-click="toggleFoldedState()" class="auto-folded--more"></a></div>'
        link: (scope, element, attrs)->
            $$window = $ $window
            content = $(element).find('.auto-folded')

            toggleFoldedState = ->
                if content.hasClass 'auto-folded--folded'
                    content.removeClass('auto-folded--folded').addClass('auto-folded--unfolded')
                else if content.hasClass 'auto-folded--unfolded'
                    content.removeClass('auto-folded--unfolded').addClass('auto-folded--folded')

                return

            scope.toggleFoldedState = toggleFoldedState


            init = ()->
                contentHeight = content.outerHeight()
                if contentHeight > 48
                    content.addClass 'auto-folded--folded'
                content.show()

            $$window.on 'ngcontentloaded',init

    }
])

这里是解释

包含它不知道的文本，因此它是一个半透明的指令。像模态弹出窗口一样，它包含文本和切换按钮。

restrict: 'E'
transclude: true
template: '<div class="auto-folded"><div ng-transclude></div><a href ng-click="toggleFoldedState()" class="auto-folded--more"></a></div>'

单击按钮时，它实际上进行切换。如果展开，则将其折叠;如果褪色，那么展开。我们通过切换classNames来实现这一目标，冷却是直截了当的

            toggleFoldedState = ->
                content.css 'color','red'

                if content.hasClass 'auto-folded--folded'
                    content.removeClass('auto-folded--folded').addClass('auto-folded--unfolded')
                else if content.hasClass 'auto-folded--unfolded'
                    content.removeClass('auto-folded--unfolded').addClass('auto-folded--folded')

                return

我们使用ng-click="toggleFoldedState()"将此操作绑定到切换按钮

如果文本在页面加载时足够高，我们必须做一些初始工作来折叠文本。但是，link指令的功能是在dom渲染之前创建实际的Dom。在link中，我们无法知道高度，这就是我们将init()注册到{{1}的原因event：

ngcontentloaded

这里我使用48px作为3行高，您可以定义自己的，或者从dom动态计算，如init = ()-> contentHeight = content.outerHeight() if contentHeight > 48 content.addClass 'auto-folded--folded' content.show() $$window.on 'ngcontentloaded',init。

因为这是在dom渲染之后完成的，所以文本已经在init（）之前显示。会有一个丑陋的slideUp效果。这就是为什么我们首先使用css（如下所示）隐藏dom，并在init中隐藏content.css('lineHeight')

所以我们完成了指令，折叠/解除状态由className控制。我们走了。

css.sass

（抱歉，我在content.show()）

sass

因此，切换按钮的文本及其可见性均由其父级的类控制。

为父母 1.如果文本不是3行高，它只有.auto-folded display: none //only display after init() position: relative .auto-folded--more //the button is placed at right-bottom, and default to hidden display: none position: absolute right: 0 bottom: 0 &.auto-folded--folded //when folded, set maxHeight, and overflow to hidden max-height: 48px overflow: hidden .auto-folded--more // toggling button is displayed, display: block &:before // and it's text is "more" content: "more" &.auto-folded--unfolded //when unfoled, s .auto-folded--more // toggling button is displayed display: block &:before // and it's text is "hide" content: "hide"作为css类，所以按钮是隐藏的

如果文字超过3行高，在'auto-folded'进程中，它的classNames将为init()。
然后显示按钮。点击它会在'auto-folded auto-folded--folded'和'auto-folded--folded'

在AngularJS中创建阅读更多链接

4 个答案:

这是在Angular

模板

directive.coffee

这里是解释

css.sass