将引导程序迁移到v4-弹出窗口不起作用 [英] Migrating bootstrap to v4 - popovers not working

问题描述

我在将Bootstrap从版本3迁移到版本4时遇到问题.问题出在popovers和popper.js库中.每次将鼠标悬停在某个元素上时，都会出现此错误:

I have problem with migrating Bootstrap from version 3 to 4. The problem is with popovers and the popper.js library. Every time I hover on an element I get this error:

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

Uncaught TypeError: Cannot read property 'indexOf' of undefined

at v(computeAutoPlacement.js:24)在Object.onLoad(applyStyle.js:57)在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.js:149)

at v (computeAutoPlacement.js:24) at Object.onLoad (applyStyle.js:57) at index.js:69 at Array.forEach () at new t (index.js:67) at i.t.show (tooltip.js:286) at HTMLSpanElement. (popover.js:166) at Function.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

And Angular 1.6

这是元素的外观:

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

这是在控制器中设置的方式:

And this is how it is set in the controller:

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

当我迁移回Bootstrap 2.3.2时，一切正常.

When I migrate back to Bootstrap 2.3.2 everything works fine.

关于导致问题的原因的任何想法?预先谢谢你！

Any idea about what is causing the problem? Thank you in advance!

推荐答案

我遇到了同样的问题并找到了解决方案，这是我的popover指令

I've faced the same problem and found solution, here is my popover directive

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'
            });
        }
    };
});

接下来我要做的是将默认位置从自动顶部"值更改为顶部"，并且现在可以使用了:)

and what I did next was changing default placement from 'auto top' value to 'top' and it works for now :)

据我了解，现在您只能指定 auto | | |中的一个.顶部|底部|左|对.

As far I understood, now you can specify only one of auto | top | bottom | left | right.

让我知道这是否对您有帮助:)

Let me know if that helps you :)

这篇关于将引导程序迁移到v4-弹出窗口不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！