Question

目前我有一个根据最大高度缩短/延长的段落。我想知道如果高度超过一定数量，我是否可以显示/隐藏锚元素。基本上我只想展示＆＃34;更多......＆＃34;如果需要的话。

＆＃13;

$scope.hidden = true;

＆＃13;

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

＆＃13;

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

＆＃13;

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

找到工作的插件

Answer 2

您可以根据描述的长度来显示此内容。

定义和用法

length属性返回字符串的长度（字符数）。

空字符串的长度为0.

例如：

<a href="#" ng-show="program.Description.length < 1000">More...</a>

编辑：

正如@Andrew Tomlinson所提到的，你可以将逻辑保留在一个句子中，例如：

<a href="#"> (program.Description.length < 1000) ? 'More...' : 'Less...'</a>

基于高度的角度显示元素

2 个答案: