代码之家 › 专栏 › 技术社区 › Knight

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

popover bootstrap-4 twitter-bootstrap angularjs javascript

Knight · 技术社区 · 6 年前

我在将引导程序从版本3迁移到版本4时遇到问题。问题在于popovers和popper.js库。每次在元素上悬停时,都会出现以下错误:

uncaught typeerror:无法读取未定义的属性“indexof”

在V处(computeAutoPlacement.js:24) 在object.onload上(applystyle.js:57) 在index.js:69 在array.foreach() 在新的t(index.js:67) 在I.T.Show上(tooltip.js:286) 在HTMLSPANEMENT。(popover.js:166) 在function.each上(jquery.min.js:2) 在r.fn.init.each(jquery.min.js:2) 在r.fn.init.i._jqueryinterface[作为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>

角度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时,一切正常。

你知道是什么引起了这个问题吗? 提前谢谢你!

2 回复 | 直到 6 年前

chalec 6 年前

我也遇到过同样的问题并找到了解决办法,这是我的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”值更改为“top”,现在可以使用了:)

据我所知,现在您只能指定 auto | top | bottom | left | right 是的。

如果有帮助,请告诉我:)

codenoob 6 年前

接受的答案可能是正确的,但我停在了“角度”。对于我的用例rails,我将“gem'tetherrails'”添加到我的gem file中,“bundle install”ed,在application.js文件中引导之前检查我是否需要popper和tether(“//=require tether”等),然后重新启动服务器,一切都恢复正常。