всплывающее окно начальной загрузки не работает в виджете ServiceNow

После многих попыток заставить его работать, я нашел решение. Вам нужно использовать Timeout.

Используйте один из следующих параметров в своем виджете.

Вариант 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);
    });
}

Пример: пример всплывающего окна

Как правило, с сервисными порталами вы хотите избегать прямых вызовов 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();
    } 
}