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：popover出现在各个位置。
IE 11：弹出窗口闪烁。

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

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

更新

根据要求，我尝试为此创建Plunk。不幸的是，我无法在那里复制问题，而且popover与我在制作应用中看到的有很大不同。

Answer 1

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

他们拥有的Popover指令很简单，你已经在使用angular和bootstrap了。我会看看dynamicPopover设置，它会是这样的：

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

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

避免使用popover指令中的闪烁

1 个答案: