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

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(如果有人知道如何做到这一点,我也很欣赏这方面的一些指导)我只是试图让content选项对象的参数中的html硬编码显示popover .

但是,只要按钮加载视图(在我单击按钮之前),我就会收到以下错误

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>

Answer 1

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

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