Popolare bootstrap AngularJS con un'altra direttiva Oggetto [oggetto Object] non ha alcun metodo 'popover'

Question

Ho un pulsante che mi piacerebbe attivare un popover bootstrap. Funziona bene, tranne che ho bisogno che quel popover abbia un'altra direttiva in esso (in pratica popover contiene un elenco di elementi).

Ho trovato questo articolo http://tech.pro/tutorial/1360/bootstrap-popover-using-angularjs-compile-service ma seguirlo non sembra funzionare molto bene per me.

Ho fatto una direttiva personalizzato

.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); 
     } 
    } 

e il seguente è il mio marchio HTML fino

<button type="button" class="btn btn-primary btn-small" popoverHTML><i class="icon-white icon-plus"></i></button> 

Per ora non sto passando alcun HTML personalizzato ad esso (se qualcuno sa come si fa Apprezzerei anche alcune indicazioni su questo argomento) Sto solo cercando di far apparire il popover con il codice html hardcoded nel parametro content dell'oggetto opzioni.

Comunque sto ottenendo il seguente errore non appena la vista con i carichi dei pulsanti (prima che io clic sul pulsante)

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

Secondo la mia googlefu questo può significare un sacco di cose e Gradirei qualche idea su cosa potrebbe significare nel contesto di Angular.

Grazie!

MODIFICA: Elenco dei miei JS inclusi.

<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

Suggerirei esaminando AngularStrap Popovers. In generale, consiglierei AngularUI, ma AngularStrap supporta template parziali nei popover e AngularUI no.

Se si utilizza AngularStrap, è possibile scrivere solo un partial HTML da visualizzare nel popover e tale partial può includere qualsiasi direttiva che si desideri come un normale partial angolare.

Answer 2

Caricamento jQuery prima di angolare risolverà il problema. Tecnicamente il problema sta caricando jQuery due volte (una da angolare cioè jqLite e l'altro viene caricato successivamente come file di js separato)

spiegato qui https://stackoverflow.com/a/8792470

Non