角度のUIブートストラップ指示文でテキストが切り捨てられた場合にのみツールヒントを表示

Question

角度のUIのブートストラップツールチップを、テキストが切り捨てられているときに表示します。 私はそれが角-UI-ブートストラップバージョン0.12.1で正常に動作するカスタムディレクティブ

<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); 
     } 
     }); 
    } 
    } 
}) 

で以下のコードを試してみました。しかしそれ以降のバージョンはこれをサポートしていません。

最新バージョンのangle-ui-bootstrapでは、この同じ機能をどのように達成できますか？

ご協力いただきありがとうございます。

Answer 1

TL; DR：Plunker Demo (using $watch) Old demo (using $timeout)

（答えはコメントMichael Mish Kisilenkoのため、代わりに$タイムアウトの鑑賞$感謝を使用するための提案を反映するように更新されました！）すべての

ファーストあなたのangle-ui指令を更新した指令（ 'uib-'の接頭辞）に変更してください：

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

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); 
     } 
     });*/ 
    } 
    }; 
}]); 

切り捨てるには：nのテキストが切り捨てられていない場合は、ディレクティブtooltip-enable="false"を持つ要素を初期化する必要があることに注意してくださいので、ツールチップは無効になります動的な角度-uiを提供する機能tooltip-enableを（変更する次のディレクティブを使用しますテキスト私は平らなCSSを使用します：

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

Answer 2

Luluによって投稿された答えに記載されているように時計を使用するとパフォーマンスが低下します。多くのセルグリッドが持つように多くのウォッチャーが追加され、各ダイジェストサイクルで評価されます。

私は、マウスオーバーのアプローチを使用するように彼のコードを修正 - ので、ツールチップの必要性は、特定のセルにmouseoverイベントで評価されています

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); 
    }); 
    } 
});