将引导程序迁移到v4 - 弹出窗口无法正常工作

Question

我有从将版本3迁移到4的Bootstrap的问题.问题在于popovers和popper.js库.每次我在一个元素上悬停我都会收到此错误:

未捕获的TypeError:无法读取未定义的属性'indexOf'

at v(computeAutoPlacement.js:24)at.onLoad(applyStyle.js:57)at index.js:69 at Array.forEach()at new t(index.js:67)atthehow(tooltip.js:286) )在HTMLSpanElement.(popover.js:166)在函数each(jquery.min.js:2)at r.fn.init.each(jquery.min.js:2)at r.fn.init.i._jQueryInterface [as popover ](popover.js:149)

我使用的库:

<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>

和Angular 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时,一切正常.

是什么导致问题？先感谢您!

Answer 1

我遇到了同样的问题并找到了解决方案,这是我的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 | bottom | left | right.

让我知道,如果这有助于你:)