如何擴展ui bootstrap指令

Question

通過在$uibTooltip中修補鏈接函數來實現它非常簡單，但我不想修改第三方庫並僅僅爲了擴展指令。

只有文本有省略號（例如blabla...），我需要顯示觸發器「顯示」工具提示。

的使用情況是一樣的UI，引導頁面上，但隨着新的屬性：

<input type="text" value="Click me!" uib-tooltip="See?" tooltip-trigger="focus" tooltip-placement="right"/> 

新屬性： tooltip-ellipsis="true"。

只有在觸發事件之前和鏈接狀態之後才能檢測到省略號。

因此，也有辦法：

• provider.decorator - >$delegate - 我認爲這是不是一種選擇，我需要修改鏈接，我不知道如何與裝修做到這一點。
• 包裝爲uib-tooltip，但我無法找到在我的包裝鏈接中獲得選項的方式。

Answer 1

解決方案1 ​​

如果你想要的是，以決定是否應該提示基於來自父作用域屬性你不應該需要擴展指令顯示在焦點或沒有，你具有這樣的tooltip-enable屬性。

而不是做

<input type="text" value="Click me!" uib-tooltip="See?" tooltip-trigger="focus" tooltip-placement="right" tolltip-ellipsis="true"/> 

做：

<input type="text" value="Click me!" uib-tooltip="See?" tooltip-trigger="focus" tooltip-placement="right" tooltip-enable="hasEllipsis"/> 

，並據此設置$ scope.hasEllipsis。爲例

解決方案2

您提示觸發事件設置爲none時，有沒有在你的文字省略號見documentation plunkr。在你的控制器中這應該是微不足道的。

解決方案 - 3（如果你真的想添加一個新的屬性）

您可以創建具有相同名稱的另一個指令，並補充說，修改第一範圍的值，你自己的鏈接功能。

請參閱我的modified plunkr將counter指令擴展爲新的shouldCount屬性，該屬性修改原始值並防止計數。

（如果這就是你想要達到的目標我不推薦做這個。使用方案1或2）

Answer 2

這裏是我解決這個問題，不知道這是否是最好的，但它的工作原理

HTML

<div elements-overflow-ellipsis> 
    <span class="font-bold no-margins"> {{name | translate}} </span>: 
</div> 

CSS

.basic-overflow-ellipsis { 
    white-space: nowrap; 
    text-overflow: ellipsis; 
    overflow: hidden; 
} 

JS

(function() { 
    'use strict'; 

    angular.module('dcElements') 
     .directive('elementsOverflowEllipsis', [ '$compile', function($compile) { 
      return { 
       restrict: 'A', 
       priority: 1000, 
       controller: ElementsOverflowEllipsisController, 
       controllerAs: '$ctrl' 
      } 
     } ]); 

    ElementsOverflowEllipsisController.$inject = [ '$scope', '$compile', '$element' ]; 

    function ElementsOverflowEllipsisController($scope, $compile, $element) { 
     var $ctrl = this; 
     $ctrl.isEllipsisActive = isEllipsisActive; 

     activate(); 

     function isEllipsisActive() { 
      return ($element[0].offsetWidth < $element[0].scrollWidth); 
     }; 

     function activate() { 
      $element.addClass('basic-overflow-ellipsis'); 
      if (!$element.attr('uib-tooltip')) { 
       $element.attr('uib-tooltip', $element.text()); 
       $element.attr('tooltip-enable', "$ctrl.isEllipsisActive()"); 
       $compile($element)($scope); 
      } 
     } 
    } 

})();