在使用angular-bowser
进行设备检测时,我需要为移动设备配置 angular bootstrap工具提示(uibTooltip)。
这可以通过以下方式完成:
isMobile = _bowser.mobile
$uibTooltipProvider.options = { trigger: isMobile ? "none" : "mouseenter" }
问题: $uibTooltipProvider
是提供商,bowser
是服务。
我必须在$uibTooltipProvider
函数中使用config
,而我无法在bowser
函数中使用config
服务。我也不能在$uibTooltipProvider
函数中使用run
我可以使用bowser
我已经尝试覆盖$ get函数,因为他们建议使用here,但$ window中的“ontouchstart”事件不适用于我想要启用工具提示的平板电脑。< / p>
有什么方法可以解决这个问题吗?
答案 0 :(得分:0)
我最终决定在运行时注入一个小的CSS修改。我有以下三个选项:
1。使用hack on GitHub:我不喜欢这样一个事实:为了让它发挥作用我必须凭经验(通过设置一个突破点)找出哪些是实际的在uibTooltipProvider的$ get函数中注入的服务。 (看看github线程中注入的服务和我必须注入的服务之间存在差异(see code snippet)
2。添加bowser库并静态使用它:我不喜欢这个选项,因为我们已经使用angular-bowser作为我们的DeviceDetector服务的依赖项,所以我们将使用相同的库两次:一个用于配置工具提示选项,另一个用于运行时用于其他所有选项。
3。注入一个小的CSS修改(我选择的选项):
public disableTooltipsForTouchScreen(): void {
if ( this._deviceDetector.isMobile() || this._deviceDetector.isTablet() ) {
let styleSheet = document.createElement("style");
styleSheet["innerHTML"] = ".tooltip { display: none; }";
document.body.appendChild(styleSheet);
}
}
如果我们需要对bootstrap-tooltip配置进行最好的控制,那么我会考虑选项2.