Question

我正在处理其他有角度的应用程序。我试图添加一个弹出窗口。 html位于ng-include模板中，并带有标记：

<p class="filetracker-label" data-toggle="popover" title="title is here!" data-content="popOver on bottom">Tracked Files</p>

我在body标签中初始化了popovers（bootstrap.js和jquery都在head标签中 - 我已经移动了它们，但它没有改变任何东西）：

<script>
$(document).ready(function() {
    $('[data-toggle="popover"]').popover({
        placement: 'left',
        trigger : 'hover'
    });
    console.log('here');
});
</script>

我在bootstrap之前加载jquery - 我已经研究了所有其他帖子，但是我无法看到我做错了什么。我在悬停时看到了标题文字，但它不是自举样式 - 当然内容也没有。

Answer 1

如果您想要进行Angular和Bootstrap，我建议使用UI Bootstrap，它是用纯AngularJS编写的Bootstrap组件。

使用UI Bootstrap的popovers文档位于：http://angular-ui.github.io/bootstrap/#/popover

Answer 2

这是一个可能的解决方案：https://jsfiddle.net/99x50s2s/53/

看起来弹出窗口隐藏在页面中，因为您已将其设置为＆＃39; Left＆＃39;。设置跟踪文件的宽度＆＃39;文本并将其更改为底部，将显示弹出窗口。

JS

$('[data-toggle="popover"]').popover({
        placement: 'bottom',
        trigger : 'hover'
});

HTML

<p class="filetracker-label" data-toggle="popover" title="title is here!" data-content="popOver on bottom">Tracked Files</p>

CSS

.filetracker-label{
width:100px;
}

Answer 3

好的，我确实认为。弹出窗口初始化需要在应用程序的该部分的角度控制器内。回想起来有点明显，因为html在ajax请求之后被注入，这是在文档就绪函数已经被触发之后。新角度...

无法在bootstrap中初始化弹出窗口

3 个答案: