Question

将 bootstrap 迁移到 v4 - 弹出窗口不起作用

2018-07-06

5115

javascript angularjs twitter-bootstrap bootstrap-4 popover

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

Uncaught TypeError: Cannot read property 'indexOf' of undefined

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

元素如下所示：

<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

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

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

我接下来所做的是将默认位置从“自动顶部”值更改为“顶部”，现在它可以正常工作:)

据我了解，现在您只能指定 自动|顶部|底部|左侧|右侧 中的一个。

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

Answer 2

可接受的答案可能是正确的，但我在“angular”处停了下来。对于我的用例 Rails，我将“gem 'tether-rails'”添加到我的 Gemfile 中，进行“bundle install”，检查在 application.js 文件中 bootstrap 之前是否需要 popper 和 tether（“//= require tether”等），然后重新启动服务器，一切又恢复正常。

Answer 3

就我而言，我将 placement: "" 传递给 popover() 函数。我停止传递 placement 参数，它运行良好。