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>

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

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

有什么建议吗？

谢谢！

Answer 1

一般来说，对于服务门户，您希望避免直接 jQuery 调用，而是使用 Angular。您看到的错误可能就是由此产生的。

您需要查看 BootstrapUI for Bootstrap + Angular 以获得您可以在此处使用的一些 API 的参考，但可能仍然会被击中或失败-小姐。

利用 $uibModal 服务打开您的模式。

我用过的一个很好的资源是 https://serviceportal.io, in particular for your case https://serviceportal.io/modal-windows-service-portal/。

我已经在我们的伊斯坦布尔实例上测试了他们的示例并且它有效。总结一下 post，以下是您可能想针对您的情况尝试的方法。

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" ng-click="c.openModal()" />  
    </li>
</span>

<script type="text/ng-template" id="modalTemplate">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">Modal Window</h4>
        </div>
        <div class="panel-body wrapper-xl">
            Hello
        </div>
        <div class="panel-footer text-right">
            <button class="btn btn-primary" ng-click="c.closeModal()">${Close Modal}</button>
        </div>
    </div>
</script>

客户端脚本

function($uibModal, $scope) {
    var c = this;

    c.openModal = function() {
        c.modalInstance = $uibModal.open({
            templateUrl: 'modalTemplate',
            scope: $scope
        });
    }

    c.closeModal = function() {
        c.modalInstance.close();
    } 
}

Answer 2

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

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

选项 #1 - 客户端脚本（客户端控制器）

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

选项 #2 - Link 函数

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

样本： Popover sample

bootstrap 弹出窗口在 ServiceNow 小部件中不起作用

bootstrap popover not working in ServiceNow widget

jquery

twitter-bootstrap

angularjs

servicenow

bootstrap-popover