5

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

我发现这篇文章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>
4

2 回答 2

3

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

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

于 2013-08-16T14:01:53.750 回答
1

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

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

于 2013-12-23T10:11:00.020 回答