Cửa sổ bật lên AngularJS bootstrap với một chỉ thị khác [đối tượng đối tượng] không có phương thức 'popover'

Question

Tôi có một nút mà tôi muốn kích hoạt cửa sổ bật lên bootstrap. Điều đó hoạt động tốt ngoại trừ việc tôi cần popover đó để có một chỉ thị khác trong đó (về cơ bản cửa sổ popover chứa một danh sách các mục).

Tôi đã tìm thấy bài viết này http://tech.pro/tutorial/1360/bootstrap-popover-using-angularjs-compile-service nhưng theo dõi nó dường như không hoạt động tốt cho tôi.

tôi đã thực hiện một chỉ thị tùy chỉnh

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

và sau đây là dấu HTML của tôi lên

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

Còn bây giờ tôi không đi qua bất kỳ html tùy chỉnh để nó (nếu ai biết làm thế nào để làm điều đó Tôi muốn đánh giá cao một số hướng dẫn về điều này là tốt) Tôi chỉ cố gắng để có được popover xuất hiện với html hardcoded trong content param của đối tượng tùy chọn.

Tuy nhiên tôi nhận được lỗi sau càng sớm càng quan điểm với tải trọng nút (trước khi tôi nhấn vào nút)

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

Theo googlefu tôi điều này có thể có nghĩa là khá nhiều của sự vật và Tôi sẽ đánh giá cao một số hiểu biết về những gì có thể có nghĩa là trong bối cảnh của Angular.

Cảm ơn bạn!

EDIT: Danh sách JS của tôi bao gồm.

<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

tôi sẽ khuyên bạn nên nhìn vào AngularStrap Popovers. Nói chung, tôi khuyên bạn nên AngularUI, nhưng AngularStrap hỗ trợ partials mẫu trong popovers và AngularUI không.

Nếu bạn đi với AngularStrap, bạn chỉ có thể viết một phần HTML được hiển thị trong cửa sổ bật lên và phần đó có thể bao gồm bất kỳ chỉ thị nào bạn thích giống như phần Góc bình thường.

Answer 2

Tải jQuery trước góc sẽ giải quyết được sự cố. Về mặt kỹ thuật các vấn đề đang tải jQuery hai lần (một từ góc tức là jqLite và người kia được nạp sau khi tập tin js riêng)

giải thích ở đây https://stackoverflow.com/a/8792470