Yalnızca araç, açısal UI önyükleme yönergesi

Question

'da kırpıldığında araç ipucunu göster Yalnızca, metin kırpıldığında açısal UI önyükleme ipucu araç ipucu göstermek istiyorum. Ben Bu açısal-ui-önyükleme sürümü 0.12.1 yılında çalışıyor

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

özel yönergesi ile aşağıdaki kodu çalıştı. Ancak daha sonraki versiyonlar bunu desteklemiyor.

Bu aynı işlevselliği, açısal-ui önyüklemesinin en son sürümünde nasıl sağlayabilirim?

Yardımlarınız için şimdiden teşekkür ederiz.

Answer 1

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

(cevap comment Michael Mish Kisilenko için, $ yerine zaman aşımı izlemek $ sayesinde kullanmak için bir öneri yansıtacak şekilde güncellenmiştir!) Her şeyden

İlk ('uib-' ile önek) güncellendi gelenlerle açısal-ui direktiflerini değiştirin:

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

Ve n dinamik olarak sunulan açısal-ui değiştirir aşağıdaki yönergesini de kullanabilirsiniz metin kesildi değilse yönerge tooltip-enable="false" böylece ipucu devre dışı bırakılacak olan eleman başlatmak gerekir tooltip-enable (not özelliği:

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

kesmek için metin kullanacağım düz CSS:

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

Answer 2

Saatin, Lulu tarafından gönderilen yanıtta belirtildiği gibi kullanılması performansı düşürecektir. Birçok hücre ızgarası olduğu kadar çok gözlemci katacak ve bunlar her bir sindirim döngüsünde değerlendirilecektir.

ben mouseover yaklaşım kullanmak için onun kodunu modifiye - yani araç ipucu ihtiyacı sadece belirli hücre üzerinde mouseover olay değerlendirilir:

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