javascript - 基于高度的 Angular 显示元素

Question

目前我有一个段落会根据最大高度缩短/加长。我想知道如果高度超过一定数量，是否有一种方法可以显示/隐藏 anchor 元素。 本质上，我只想在需要时显示“更多...”。

$scope.hidden = true;

    .__Description {
    overflow: hidden;
    word-wrap: break-word;
    text-overflow: ellipsis;
    }
    .less {
      max-height: 160px;
 
    }

<div class="__Description">
	    <div class="__contents" ng-class="{less: hidden}">
		    <div data-ng-bind-html="program.Description"></div>
	    </div>
    </div>
    <a ng-click="hidden = !hidden">{{hidden? 'More...' : 'Less...'}}</a>

Answer 1

我会将内容和阅读内容包装在一个指令中。

该指令将监视内容高度，然后切换范围上的属性。

这是一般思想的伪代码。 (下面的plunker链接) 为了使代码更适合您的需要，我需要更多信息

<program-description>
<div class="__programDescription">
    <div class="__contents" ng-class="{less: hidden}">
        <div data-ng-bind-html="program.Description"></div>
    </div>
</div>

</program-description>


angular.module('myApp').directive('programDescription', function(){

    return {

         restrict: 'A',
         transclude: true, 
         template: '<div><div ng-transclude></div> <a ng-show="showToggle">{{ toggleText }}</a></div>',
         link: function( scope, element, attrs ){
               var limit = attrs.limit  ? parseInt(attrs.limit,10) : 200; // default to 200px
               scope.$watch(function(){
                   return element.find('.__programDescription').height();
               }, function(if (newValue > limit){
                   scope.showToggle = true;
               });

               .. some more code to handle more/less clicks.. 

         }
     }

})

可在以下位置找到可用的插件:http://plnkr.co/edit/Sm393HAzTRp8wqEPNkdg?p=preview