javascript 带有另一个指令 Object [object Object] 的 AngularJS bootstrap popover 没有方法“popover”
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18255156/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
AngularJS bootstrap popover with another directive Object [object Object] has no method 'popover'
提问by americanslon
I have a button that I would like to trigger a bootstrap popover. That works fine except that I need that popover to have another directive in it (basically popover contains a list of items).
我有一个按钮，我想触发引导程序弹出窗口。这很好用，只是我需要 popover 在其中包含另一个指令（基本上 popover 包含一个项目列表）。
I have found this article http://tech.pro/tutorial/1360/bootstrap-popover-using-angularjs-compile-servicebut following it doesn't seem to work for me very well.
我发现这篇文章http://tech.pro/tutorial/1360/bootstrap-popover-using-angularjs-compile-service但遵循它似乎对我来说不是很好。
I made a custom directive
我做了一个自定义指令
.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);
}
}
and the following is my HTML mark up
以下是我的 HTML 标记
<button type="button" class="btn btn-primary btn-small" popoverHTML><i class="icon-white icon-plus"></i></button>
For now I am not passing any custom html to it (if anybody knows how to do that I'd appreciate some guidance on this as well) I am just trying to get the popover appear with the html hardcoded in contentparam of the options object.
现在我没有将任何自定义 html 传递给它（如果有人知道如何做，我也希望得到一些指导）我只是想让弹出窗口出现content在选项对象的 param 中硬编码的 html 。
However I am getting the following error as soon as the view with the button loads (before I click on the button)
但是，一旦带有按钮的视图加载（在单击按钮之前），我就会收到以下错误
TypeError: Object [object Object] has no method 'popover'
TypeError: Object [object Object] has no method 'popover'
According to my googlefu this can mean quite a lot of things and I would appreciate some insight on what that could mean in the context of Angular.
根据我的 googlefu，这可能意味着很多事情，我很感激在 Angular 的上下文中这可能意味着什么。
Thank you!
谢谢！
EDIT: List of my JS includes.
编辑：我的 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>
采纳答案by Jon7
I would recommend looking into AngularStrap Popovers. Generally, I'd recommend AngularUI, but AngularStrap supports template partials in popovers and AngularUI doesn't.
我建议查看AngularStrap Popovers。通常，我会推荐 AngularUI，但 AngularStrap 支持弹出窗口中的模板部分，而 AngularUI 不支持。
If you do go with AngularStrap, you can just write an HTML partial to be displayed in the popover and that partial can include whatever directives you like just like a normal Angular partial.
如果您确实使用 AngularStrap，您只需编写一个 HTML 部分以显示在弹出窗口中，该部分可以像普通的 Angular 部分一样包含您喜欢的任何指令。
回答by user2195916
Loading jQuery prior to angular will solve the issue. Technically the problem is loading jQuery twice (one from angular i.e. jqLite and the other is loaded later as separate js file)
在 angular 之前加载 jQuery 将解决这个问题。从技术上讲，问题是加载 jQuery 两次（一个来自 angular ie jqLite，另一个稍后作为单独的 js 文件加载）
explained here https://stackoverflow.com/a/8792470
