Question

I have template like this:

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

with css:

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

And I need to not show plus and minus sign icons when div with class htmlContent is only one line, how can I do this in 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

How to detect if content have more then one line in Angular?

2 个答案: