將引導程序遷移到v4 - 彈出窗口無法正常工作

Question

我有從將版本3遷移到4的Bootstrap的問題。問題在於popovers和popper.js庫。 每次我在一個元素上懸停我都會收到此錯誤：

未捕獲的TypeError：無法讀取未定義的屬性'indexOf'

at v（computeAutoPlacement.js：24）在Object.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 auto | top | bottom | left | right auto | top | bottom | left | right 。

讓我知道，如果這有助於你:)

Answer 2

接受的答案可能是正確的答案，但我停在'有角度'。 對於我的用例，Rails，我在我的Gemfile中添加了“gem'therher-rails'”，“bundle install”ed，在我的bootstrap之前檢查我是否需要popper和tether（“// = require tether”等） application.js文件，並重新啟動服務器，一切都恢復正常。