angularjs - 仅当文本在 angular UI bootstrap 指令中被截断时才显示工具提示

Question

我只想在文本被截断时显示 Angular UI 引导工具提示。
我用自定义指令尝试了下面的代码

<div tooltip="{{value}}" tooltip-append-to-body="true" enable-truncate-tooltip>{{value}}</div>

.directive("enableTruncateTooltip", function () {
  return {
    restrict: 'A',
    link: function (scope, elem, attr) {
      elem.bind('mouseenter', function () {
        var $this = angular.element(this);

        if (this.offsetWidth >= this.scrollWidth) {
          angular.element('.tooltip').attr('hide-tooltip', true);
        }
      });
    }
  }
})

它在 angular-ui-bootstrap 版本中工作正常 0.12.1 .但是后来的版本不支持这个。

如何在最新版本的 angular-ui-bootstrap 中实现相同的功能？

在此先感谢您的帮助。

Answer 1

TL;博士 :Plunker Demo (using $watch) Old demo (using $timeout)

(答案已更新以反射(reflect)使用 $watch 而不是 $timeout 的建议，感谢您的评论 Michael Mish Kisilenko!)

首先，将您的 angular-ui 指令更改为更新的指令(前缀为“uib-”):

<div uib-tooltip="{{value}}" show-tooltip-on-text-over-flow tooltip-enable="false">{{value}}</div>

然后使用以下指令，它会动态更改 angular-ui 提供的功能 tooltip-enable (请注意，您应该使用指令 tooltip-enable="false" 初始化元素，因此如果文本未被截断，工具提示将被禁用:

myApp.directive("showTooltipOnTextOverflow", ["$timeout", function($timeout) {
  return {
    restrict: 'A',
    link: function(scope, element, attrs) {
      var el = element[0];
      scope.$watch(function(){
        return el.scrollWidth;
      }, function() {
        var el = element[0];
        if (el.offsetWidth < el.scrollWidth) {
          //console.log('ellipsis is active for element', element);
          attrs.tooltipEnable = "true";
        } else {
          //console.log('ellipsis is NOT active for element', element);
        }
      });
      /*$timeout(function() {
        var el = element[0];
        if (el.offsetWidth < el.scrollWidth) {
          //console.log('ellipsis is active for element', element);
          attrs.tooltipEnable = "true";
        } else {
          //console.log('ellipsis is NOT active for element', element);
        }
      });*/
    }
  };
}]);

要截断文本，我将使用纯 CSS:

span.truncated {
    width: 400px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}