Question

我有一个按钮，我想触发一个bootstrap popover。这工作正常，除了我需要popover在其中有另一个指令（基本上popover包含项目列表）。

我找到了这篇文章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（如果有人知道如何做到这一点我也很欣赏这方面的一些指导）我只是想在{{1}中使用html硬编码来显示popover选项对象的参数。

然而，只要按钮加载视图（在点击按钮之前），我就会收到以下错误

content

根据我的googlefu，这可能意味着很多事情，我很欣赏一些关于Angular背景下可能意味着什么的见解。

谢谢！

编辑：我的JS列表包括。

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

Answer 1

我建议调查AngularStrap Popovers。一般来说，我推荐使用AngularUI，但AngularStrap支持弹出窗口中的模板部分，而AngularUI则不支持。

如果你选择使用AngularStrap，你可以编写一个HTML部分来显示在popover中，而partial可以包含你喜欢的任何指令，就像普通的Angular部分一样。

Answer 2

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

在此解释https://stackoverflow.com/a/8792470

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

2 个答案: