避免弹出指令中的闪烁

Question

这个简单的指令函数：

function popoverHelp () {
    return {
        restrict: 'E',
        scope: {
            title: '@',
            text: '@'
        },
        templateUrl: 'popoverHelp.html'
    };

使用此模板：

<i class="fa fa-question-circle" popover="{{::text}}" popover-placement="top"
popover-title="{{::title}}" popover-trigger="mouseenter"></i>

首次显示工具提示时会导致闪烁。具有静态文本且没有指令的相同 HTML 不会明显闪烁。

Chrome：轻微闪烁。
Firefox：弹出框出现在不同的位置。
IE 11：弹出窗口闪烁。

添加 ng-cloak 没有任何区别。

如何减少或消除闪烁并仍然使用模板？

更新：

根据要求，我已尝试为此创建一个 Plunk。不幸的是，我无法在那里重现该问题，弹出窗口看起来与我在生产应用程序中看到的大不相同。

Answer 1

考虑到该问题无法在您创建的 Plunk 中复制，因此我们无法查看或解决该问题。我看到避免闪烁的最简单解决方案是使用 Angular UI.

他们的 Popover 指令很简单，您已经在使用 AngularJS 和 Bootstrap。我会看看 dynamicPopover 的设置，它会是这样的：

<i class="fa fa-question-circle" uib-popover-template="dynamicPopover.templateUrl" popover-trigger="'mouseenter'"></i>

这也应该有助于跨浏览器标准化弹出窗口的外观。

避免弹出指令中的闪烁

Avoiding flicker in popover directive

flicker

twitter-bootstrap

angularjs

font-awesome

angularjs-directive