将引导程序迁移到v4-弹出窗口不起作用

Question

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

  

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

     

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）

我使用的图书馆：

<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中的一个。

让我知道这是否对您有帮助：）

Answer 2

可接受的答案可能是正确的答案，但我停在了“角度”位置。对于我的用例Rails，我在Gemfile中添加了“ gem'tether-rails'”，进行了“捆绑安装”，并在引导程序启动前检查了是否需要popper和tether（“ // = require tether”等）。 application.js文件，然后重新启动服务器，一切又恢复正常。

Answer 3

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