jquery - Bootstrap 弹出窗口在 ServiceNow 小部件中不起作用

Question

我正在使用 ServiceNow 的 Istanbul 尔版本，在将 Bootstrap 弹出窗口合并到我的一个小部件中时遇到了一些问题。该小部件当前具有 fullCalendar 依赖性，并呈现包含重要日期的日历。我想合并一个弹出窗口，用户可以单击该弹出窗口来获取更多信息，但它似乎无法正常工作。我已经使用以下 jquery 初始化了弹出窗口:

<script>
$(document).ready(function(){
    $('[data-toggle="popover"]').popover(); 

    $('.popover-dismiss').popover({
        trigger: 'focus'
        })
});
</script>  

我的 HTML 看起来像这样:

<span  class="list-group-item" ng-repeat="item in c.dates | orderBy:'date' track by $index" ng-if="item.displayList=='true' && item.futureDate">
        <li class="rowflex" style="list-style: none;">
          <div class="colflex">              
                <strong><i class="fa fa-calendar" aria-hidden="true"></i>&nbsp; {{item.date}}</strong>
            <p>{{item.date_name}}</p>
          </div>
          <a tabindex="0" class="glyphicon glyphicon-question-sign" role="button" data-toggle="popover" data-placement="right" data-trigger="focus" title="test" data-content="test"/>  
        </li>
      </span>

目前，当我将鼠标悬停在问号字形上时，我可以看到“测试”，但是当我单击它时，没有任何反应。

当我查看控制台时，收到此错误消息，但我不熟悉如何修复它:

有什么建议吗？

谢谢!

Answer 1

经过多次尝试，我找到了解决方案。您需要使用超时。

在您的小部件中使用以下选项之一..

选项 #1 - 客户端脚本(客户端 Controller )

function ($scope, spUtil, $sce, $rootScope, $timeout) {
    $(document).ready(function(){
        setTimeout(function(){
            $('[data-toggle="popover"]').popover();
        },500);
    });
}

选项 #2 - 链接功能

function() {
    $(document).ready(function(){
        setTimeout(function(){
            $('[data-toggle="popover"]').popover();
        },500);
    });
}

示例: Popover sample