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 Demo (using $watch) ~~Old demo (using $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;
}

Answer 2

使用Lulu发布的回答中提到的手表会降低性能。它将添加许多单元网格所具有的观察者，并在每个摘要周期中对其进行评估。

我修改了他的代码以使用鼠标悬停方法 - 因此只在特定单元格的鼠标悬停事件中评估工具提示的需求：

myApp.directive("showTooltipOnTextOverflow", ["$timeout", function($timeout) {
  return {
    restrict: 'A',
    link: function(scope, element, attrs) {
      var el = element[0];

      if (angular.isObject(el)) {
        var evaluateTooltip = (event: JQueryEventObject, isOurEvent: boolean) => {
        // evaluate whether to enable tooltip
        attrs.tooltipEnable = el.offsetWidth < el.scrollWidth ? "true" : "false";

        if (isOurEvent !== true && attrs.tooltipEnable === "true") {
          // tooltip should be enabled, trigger mouseover again to trigger tooltip (current mouseover is already handled by tooltip with false value)
          // and mark it as our event to avoid its handling here
          element.trigger("mouseover", [true]);

          // revert tooltip enabling back to false to cover case when mouseover happens and tooltip should not be enabled
          scope.$applyAsync(() => {
          attrs.tooltipEnable = "false";
        });
      }
    };

    element.on("mouseover", evaluateTooltip);

    element.on("$destroy", () => {
      element.off("mouseover", evaluateTooltip);
    });
  }
});

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

2 个答案: