仅在角度UI引导指令中截断文本时显示工具提示

Question

我想仅在文本被截断时显示角度UI bootsrap工具提示.我用自定义指令尝试了下面的代码

<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; DR:Plunker演示(使用$ watch) 旧演示(使用$ timeout)

(答案已更新,以反映使用$ 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;
}