如何在配置函数中访问服务或访问服务中的提供程序

Question

I need to configure angular bootstrap tooltip (uibTooltip) to be disabled for mobile devices when using angular-bowser for device detection.

This could be done simply by:

isMobile = _bowser.mobile
$uibTooltipProvider.options = { trigger: isMobile ? "none" : "mouseenter" }

Problem: $uibTooltipProvider is a provider and bowser is a service .

I have to use $uibTooltipProvider in a config function while I can't use bowser service in a config function. And neither I can use $uibTooltipProvider in a run function where I can use bowser

I have already tried overriding the $get function as they suggest here but the "ontouchstart" event in $window does not apply for tablets where I want to keep tooltips enabled.

Is there any way I can get a workaround this?

Answer 1

I finally decided to inject a small css modification in run time. I had the three following options:

1. Use that hack on GitHub : I did not like the fact that in order to make it work I had to empirically (by placing a breaking point) find out which were the actual services injected in the $get function of the uibTooltipProvider. (see there is a difference between the services injected in the github thread and the ones I had to inject (see code snippet)

2. Add the bowser library and use it statically: I did not like this option because we are already using angular-bowser as a dependency for our DeviceDetector service, so we would be using the same library twice: one statically to configure the tooltip options and one in runtime for everything else.

3. Inject a small css modification (the option I chose):

public disableTooltipsForTouchScreen(): void { if ( this._deviceDetector.isMobile() || this._deviceDetector.isTablet() ) { let styleSheet = document.createElement("style"); styleSheet["innerHTML"] = ".tooltip { display: none; }"; document.body.appendChild(styleSheet); } }

And if we ever need to have a finest control over the bootstrap-tooltip configuration then I will consider option 2.