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).
I have found this article http://tech.pro/tutorial/1360/bootstrap-popover-using-angularjs-compile-service but following it doesn't seem to work for me very well.
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
<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 content
param of the options object.
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'
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.
Thank you!
EDIT: List of my JS includes.
<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>