Bootstrap popover在ServiceNow小部件中不起作用

Question

我正在使用ServiceNow的伊斯坦布尔版本，并且遇到了一些将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> 

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

当我看在控制台中，我得到这个错误消息，但我不熟悉如何解决它：

有什么建议？

谢谢！

Answer 1

通常对于服务入口而言，您希望避免直接的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(); 
    } 
}