如何检测Angular中的内容是否超过一行？答案

【问题标题】：How to detect if content have more then one line in Angular?如何检测Angular中的内容是否超过一行？
【发布时间】：2015-07-01 21:01:44
【问题描述】：

我有这样的模板：

<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中做到这一点。

【问题讨论】：

这不是一个角度问题。
@mattytommo 这是 Angular 应用程序，我需要在 Angular 中执行此操作。
“内容”是什么意思？它是锚标记内的元素还是 .collapsiblebox 内的元素？
@user2989484 具有 htmlContent 类的 div。
“只有一行”是什么意思？我不知道你的对象是什么样子的，但你不能做一些类似 htmlContent.children 或 htmlContent.length 的事情来检查它是否不止一个元素吗？

标签： javascript css angularjs

【解决方案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>

【讨论】：

【解决方案2】：

您可以将 CSS 设置为仅显示一行，但在文本溢出时显示省略号。您没有 +/- 按钮，但它可能对您有用。

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

【讨论】：

不幸的是我需要这些按钮。