AngularJS bootstrap popover 与另一个指令 Object [object Object] 没有方法'popover'答案

【问题标题】：AngularJS bootstrap popover with another directive Object [object Object] has no method 'popover'AngularJS bootstrap popover 与另一个指令 Object [object Object] 没有方法'popover'
【发布时间】：2013-08-15 14:42:49
【问题描述】：

我有一个按钮，我想触发引导弹出窗口。这很好用，只是我需要该弹出框在其中包含另一个指令（基本上弹出框包含项目列表）。

我找到了这篇文章http://tech.pro/tutorial/1360/bootstrap-popover-using-angularjs-compile-service，但我觉得这篇文章不太适合我。

我做了一个自定义指令

.directive('popoverhtml', function ($compile) {
    return {
        restrict: 'A',
        transclude: true,
        template: "<span ng-transclude></span>",
        scope: {

        },
        link: function (scope, element, attrs) {
            console.log($(element));
            var options = {
                content: "<br><br>Hey",
                placement: "right",
                html: true,
                title: "HEY",
                trigger: "click"
            };
            $(element).popover(options);
        }
    }

以下是我的 HTML 标记

<button type="button" class="btn btn-primary btn-small" popoverHTML><i class="icon-white icon-plus"></i></button>

现在我没有将任何自定义 html 传递给它（如果有人知道该怎么做，我也会很感激这方面的一些指导）我只是想让弹出框出现在content 中硬编码的 html选项对象的参数。

但是，一旦带有按钮的视图加载（在我单击按钮之前），我就会收到以下错误

TypeError: Object [object Object] has no method 'popover'

根据我的 googlefu，这可能意味着很多事情，我希望能深入了解这在 Angular 的上下文中可能意味着什么。

谢谢！

编辑：我的 JS 列表包括。

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular-resource.min.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.4.0.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>    
<script src="//cdnjs.cloudflare.com/ajax/libs/toastr.js/1.3.1/js/toastr.min.js"></script>   
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-strap/0.7.4/angular-strap.min.js"></script>      
<script src="js/admin-angular.js"></script>  <-- My custom include
<script src="js/admin-jquery.js"></script>   <-- My custom include
<script src="js/jquery.watermark.min.js"></script>    
<script src="js/jquery.base64.js"></script>

【问题讨论】：

不是一个真正的答案，但您是否尝试过 Bootstrap 的角度指令：angular-ui.github.io/bootstrap
+1 角度 UI 引导弹出框非常简单，它们允许您在弹出框中使用指令。
他们的 popover 指令实际上是我开始的地方......我没有看到显示如何在弹出窗口中使用您的自定义指令（或任何指令）的示例。我觉得我错过了一些非常明显的东西。谢谢大家。
@Jon7 你能详细说明一下吗？我没有看到任何关于如何在 popover html 中包含自定义指令的示例。谢谢。
很抱歉！我在想AngularStrap。 AngularUI 没有这个功能。我在回答中详细说明了。

标签： javascript angularjs angularjs-directive

【解决方案1】：

我建议您查看AngularStrap Popovers。一般来说，我会推荐 AngularUI，但 AngularStrap 支持弹出框中的模板部分，而 AngularUI 不支持。

如果您确实使用 AngularStrap，您可以只编写一个 HTML 部分以显示在弹出窗口中，并且该部分可以包含您喜欢的任何指令，就像普通的 Angular 部分一样。

【讨论】：

谢谢！我看到了这一点，但如果我不需要的话，我不想处理另一个 JS 包含。看起来 AngularStrap 有很多与我使用 Angular UI-Bootstrap 相同的控件（选项卡、按钮等），所以我可能会放弃后者。对此有何看法？差异等？谢谢。
所以这很有趣....如果我使用 AngularStrap，我会得到同样的结果。完全相同的错误。我已将原始问题附加到我的 JS 包含的列表中......我觉得那里发生了一些冲突或类似的事情。
@americanslon 您是否已将代码更改为使用 AngularStrap 而不是直接使用引导程序？
AngularStrap 是基础 Bootstrap.js 组件的包装器。 BootstrapUI 完全重写，是一个更健壮的框架。我目前正在努力解决同样的问题 - 试图在我的弹出窗口中包含一些 HTML。这个 github 问题正在讨论它：github.com/angular-ui/bootstrap/issues/220

【解决方案2】：

在 Angular 之前加载 jQuery 将解决这个问题。从技术上讲，问题是加载 jQuery 两次（一个来自 Angular，即 jqLite，另一个稍后作为单独的 js 文件加载）

在这里解释https://stackoverflow.com/a/8792470

【讨论】：