指令：当文字显示不全时显示tooltip提示框

问题描述：用table布局显示数据列表时，某列数据长度不确定时，一般会通过添加样式使文字超出某个长度时显示为...，同时使用tooltip显示出完整信息，此时需要编写指令判断文字宽度是否超出预定值，从而实现当文字显示不全时给出提示框，文字显示完全时无需给出提示框。

1. 指令代码

(function () {
  'use strict';

  angular
    .module('demo')
    .directive('widthOverflow', widthOverflow);

  function widthOverflow () {
    var directive = {
      restrict: 'A',
      scope: {
        enableTooltip: '='
      },
      link: linker
    };

    return directive;

    function linker (scope, element, attrs) {
      var onMouseOver = function () {
        var $el = $(element);
        if ($el[0].offsetWidth < $el[0].scrollWidth) {
          scope.enableTooltip = true;
        } else {
          scope.enableTooltip = false;
        }
        scope.$apply();
      };

      element.on('mouseover', onMouseOver);
      element.bind('$destroy', function () {
        element.unbind('mouseover');
      });
    }
  }
})();

 

2. html页面引用指令

<span class="text-ellipsis" style="width: 100px;"
    width-overflow
    enable-tooltip="enableTooltip"
    uib-tooltip="完整的文字信息"
    tooltip-enable="enableTooltip">
    完整的文字信息
</span>

<style>
    .text-ellipsis{
      font-weight: normal;
      display: inline-block;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      cursor: default;
    }
</style>

　

转载于:https://www.cnblogs.com/chenboxi/p/9202740.html