Перенос начальной загрузки на v4 - всплывающие окна не работают - PullRequest
Новая
       24

Перенос начальной загрузки на v4 - всплывающие окна не работают

0 голосов
/ 06 июля 2018

У меня проблема с миграцией Bootstrap с версии 3 на 4. Проблема с поповерами и библиотекой popper.js. Каждый раз, когда я наводю курсор на элемент, я получаю эту ошибку:

Uncaught TypeError: Невозможно прочитать свойство indexOf из неопределенного

при v (computeAutoPlacement.js: 24) в Object.onLoad (applyStyle.js: 57) at index.js: 69 в Array.forEach () при новом т (index.js: 67) на i.t.show (tooltip.js: 286) в HTMLSpanElement. (popover.js: 166) в Function.each (jquery.min.js: 2) на r.fn.init.each (jquery.min.js: 2) в r.fn.init.i._jQueryInterface [как popover] (popover.js: 149)

enter image description here

Библиотеки, которые я использовал: 

<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>

А, Угловой 1,6

Вот как выглядит элемент: 

<span class="tip-icon m-r-0" data-toggle="popover" data-content{{item.info}}" ng-if="item.info">Tooltip</span>

И вот как это установлено в контроллере: 

$('[data-toggle="popover"]').popover({
    trigger: 'hover',
    animation: false,
    html: true
});

Когда я возвращаюсь к Bootstrap 2.3.2, все работает нормально.

Есть идеи о причинах проблемы? Заранее спасибо!

Ответы [ 2 ]

0 голосов
/ 02 января 2019

Принятый ответ, вероятно, правильный, но я остановился на «угловом». Для моего варианта использования Rails я добавил gem 'tether-rails' в мой Gemfile, ed "bundle install", проверил, что мне нужны popper и tether ("// = require tether" и т. Д.) Перед загрузкой в ​​моем файл application.js и перезапустил сервер, и все снова заработало.

0 голосов
/ 25 июля 2018

Я столкнулся с той же проблемой и нашел решение, вот моя директива popover 

angular
.module('app.ui.popover', [])
.directive('bsPopover', function () {
    return {
        restrict: 'E',
        replace: true,
        template: '<span class="a-info" ng-bind-html="label"></span>',
        link: function (scope, element, attrs) {
            var el = $(element);
            el.popover({
                container: 'body',
                trigger: attrs.trigger || 'hover',
                html: true,
                animation: false,
                content: attrs.content,
                placement: attrs.placement || 'auto top'
            });
        }
    };
});

и то, что я сделал дальше, изменило размещение по умолчанию со значения 'auto top' на 'top', и пока оно работает:)

Насколько я понял, теперь вы можете указать только один из auto | top | bottom | left | right.

Дайте мне знать, если это поможет вам:)

...