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

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

1. 指令代码

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36

(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页面引用指令

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

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