AngularJS引导程序popover与另一个指令Object〔Object Object〕没有方法'popo

AngularJS bootstrap popover with another directive Object [object Object] has no method 'popover'

本文关键字：Object 有方法 popo popover 引导程序 另一个 指令 AngularJS      更新时间：2023-09-26

我有一个按钮，我想触发引导弹出。这很好，只是我需要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（如果有人知道如何做到这一点，我也很感激有关这方面的指导），我只是想让popover显示为选项对象的content参数中硬编码的html。

然而，我得到以下错误，一旦视图与按钮加载（在我点击按钮之前）

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

根据我的谷歌主页，这可能意味着很多事情，我希望能深入了解在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>

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

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

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

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

相关文章：