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

Question

我正在使用 ServiceNow 的伊斯坦布尔版本，并且在将引导弹出窗口合并到我的一个小部件中时遇到了一些问题。该小部件当前具有 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 - 客户端脚本（客户端控制器）

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

Answer 2

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

您需要查看 BootstrapUI 以获取 Bootstrap + Angular 的一些参考资料，以了解您可以在此处使用的一些 API，但可能仍然会遇到问题。

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

我使用的一个很好的资源是https://serviceportal.io，尤其是你的情况https://serviceportal.io/modal-windows-service-portal/。

我已经在我们的伊斯坦布尔实例上测试了他们的示例，并且成功了。总结这篇文章，以下是您可能希望针对您的案例尝试的方法。

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();
    } 
}