javascript - 使用 AngularJS UI 使工具提示位置相对于窗口大小

Question

我正在尝试根据屏幕分辨率更改工具提示的位置(基于 AngularJS Bootstrap UI)，基本上是在移动设备上显示第一个，在其余位置上显示第二个(最小宽度 ≥ 768px) :

tooltip-placement="top"


tooltip-placement="left"

我找到了一个使用 jQuery 的解决方案(下一段代码)，但我不知道如何在 Angular 中实现它。

$(window).on('resize', function() {
  var pos = ($(window).width() < 768) ? 'left' : 'top';
  $("#myDiv").tooltip({'placement': pos});
}).trigger('resize');

有什么提示吗？

Answer 1

您可以在范围内定义一个函数来确定工具提示的位置。例如:

$scope.getTooltipPlacement = function () {
    return ($(window).width() < 768) ? 'left' : 'top';
};

然后在您想要工具提示的元素上，您可以在 tooltip-placement 属性中调用此函数:

<a href="#" tooltip="My awesome tooltip" tooltip-placement="{{getTooltipPlacement()}}">Link</a>