在AngularJS中创建阅读更多链接

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过滤器将段落限制为字符长度,而不是将段落限制为行号.

你可以使用这样的东西:

在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>

用法非常简单,只需转换您想要显示更多/更少的内容

用途:

<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种可能性.

1. 如果你想将它固定在右下角,可以为按钮创建渐变背景,淡出效果.它看起来很好很简单.

   这里是jsfiddle:http://jsfiddle.net/sunderls/HYHZ6/. 每次切换状态时,实际上都会更改元素的类.

2. 如果你想在文本结束后立即使用它？它有点棘手,因为即使文本高度是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()to ngcontentloaded事件的原因:

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

            $$window.on 'ngcontentloaded',init

这里我使用48px作为3行高,你可以定义自己的,或者从dom动态计算,就像content.css('lineHeight').

因为这是在dom渲染之后完成的,所以文本已经在init()之前显示.会有一个丑陋的slideUp效果.这就是我们首先使用css(如下所示)和content.show()init中隐藏dom的原因

所以我们完成了指令,折叠/未折叠状态由className控制.开始了.

css.sass

(对不起,我写了sass)

.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" 

因此,切换按钮的文本和它的可见性都由其父级的类控制.

对于父级1.如果文本不是3行高,它将只有'auto-folded'css类,所以按钮是隐藏的

2. 如果文本超过3行高,init()正在进行中,它的classNames将是'auto-folded auto-folded--folded'.
   然后显示按钮.单击它将在'auto-folded--folded'和之间切换父级的classNames'auto-folded--unfolded'