Question

我正在使用ServiceNow的伊斯坦布尔版本，并且遇到了一些将引导程序popover整合到我的一个小部件中的问题。窗口小部件当前具有fullCalendar依赖关系，并呈现具有重要日期的日历。我想要合并一个用户可以点击的popover来获取更多信息，但它似乎无法正常工作。我用以下jquery初始化了popover：

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

Servicestow popover在ServiceNow小部件

2 个答案: