我只想在文本被截断时显示 Angular UI 引导工具提示。
我用自定义指令尝试了下面的代码
<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);
}
});
}
}
})
它在 angular-ui-bootstrap 版本中工作正常 0.12.1 .但是后来的版本不支持这个。
如何在最新版本的 angular-ui-bootstrap 中实现相同的功能?
在此先感谢您的帮助。
最佳答案
TL;博士 :Plunker Demo (using $watch) Old demo (using $timeout)
(答案已更新以反射(reflect)使用 $watch 而不是 $timeout 的建议,感谢您的评论 Michael Mish Kisilenko!)
首先,将您的 angular-ui 指令更改为更新的指令(前缀为“uib-”):
<div uib-tooltip="{{value}}" show-tooltip-on-text-over-flow tooltip-enable="false">{{value}}</div>
然后使用以下指令,它会动态更改 angular-ui 提供的功能
tooltip-enable
(请注意,您应该使用指令 tooltip-enable="false"
初始化元素,因此如果文本未被截断,工具提示将被禁用: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);
}
});*/
}
};
}]);
要截断文本,我将使用纯 CSS:
span.truncated {
width: 400px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
关于angularjs - 仅当文本在 angular UI bootstrap 指令中被截断时才显示工具提示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35296022/