ServiceNowウィジェットでブートストラップポップオーバーが動作しません

Question

私はServiceNowのイスタンブールバージョンで作業しています。私のウィジェットの1つにブートストラップポップオーバーを組み込んだいくつかの問題が発生しています。このウィジェットは現在fullCalendarに依存しており、重要な日付のカレンダーをレンダリングします。私は、ユーザーがクリックしてより多くの情報を得るためのポップオーバーを組み込みたいのですが、正しく動作していないようです。私のHTMLは次のようになり

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

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

：私は、次のjQueryを使ってポップオーバーを初期化してきました

<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呼び出しを避け、代わりに「角度」を使用します。あなたが見ているエラーはおそらくそれからです。

Bootstrap + AngularについてはBootstrapUIを参照してください。ここで使用できる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(); 
    } 
}