如何檢測Angular中的內容是否多於一行？

Question

我的模板是這樣的：

<span class="collapsibleBox"> 
    <a ng-show="visible" ng-click="hide()" class="minus"> 
     <i class="fa fa-minus-square-o"></i> 
    </a> 
    <a ng-show="!visible" ng-click="show()" class="plus"> 
     <i class="fa fa-plus-square-o"></i> 
    </a> 
    <div ng-show="visible || preview" ng-class="preview ? 'previewBox' : 'contentBlock'" ng-bind-html="htmlContent"></div> 
</span> 

與CSS：

.api .previewBox { 
    height: 1.25em; 
    overflow: hidden; 
} 

，我需要不顯示加號和減號圖標，類htmlContent div的時候只有一行，我該怎麼辦這在Angular中。

Answer 1

我想出了這個指令：

module.directive('oneLine', function($rootScope) { 
    return { 
     restrict: 'A', 
     scope: { 
      text: '=', 
      oneLine: '=' 
     }, 
     link: function($scope, $element, $attrs) { 
      angular.element(window).bind('resize', function() { 
       var height = $element.html('M').show().height(); 
       $element.html($scope.text); 
       $scope.oneLine = height == $element.height(); 
       $element.hide(); 
       if (!$rootScope.$$phase) { 
        $rootScope.$apply(); // $scope throw "digest in progress" exception 
       } 
      }).trigger('resize'); 
     } 
    }; 
}); 

，並使用它像這樣：

<span class="collapsibleBox"> 
    <span ng-hide="hideButtons"> 
     <a ng-show="visible" ng-click="hide()" class="minus"> 
      <i class="fa fa-minus-square-o"></i> 
     </a> 
     <a ng-show="!visible" ng-click="show()" class="plus"> 
      <i class="fa fa-plus-square-o"></i> 
     </a> 
    </span> 
    <div class="contentBlock" one-line="hideButtons" text="htmlContent"></div> 
    <div ng-show="visible || preview" ng-class="preview ? 'previewBox' : 'contentBlock'" ng-bind-html="htmlContent"></div> 
</span> 

Answer 2

您可以將CSS設置爲僅顯示一行，但在文本溢出時顯示省略號。你沒有得到+/-按鈕，但它可能適用於你。

見http://www.w3schools.com/cssref/css3_pr_text-overflow.asp