Popover не отображается в угловом шаблоне

Question

Я использую bootstrap popover с угловым шаблоном. Я включаю угловой шаблон с директивой ng-include. Шаблон состоит из popover. Я пытаюсь принести этот popover через угловую директиву, но он не отображается. угловая директива

angular.module('app').directive('popover', function() { 
    return { 
     link: function (scope, element, attrs) { 
      $("[data-toggle=popover]").popover(); 
     } 
    }; 
}); 

Следующий шаблон HTML в настоящее время включен из другого HTML страницы с нг-включают в себя директиву.

<div> 
    <span class="title"> 
     <button title="" data-original-title="" class="popper btn-link" popover data-toggle="popover">4 Peoples</button> 

     <div class="popper-content hide"> 
      <p> 
       <span> Alex</span> 
       <a href="#" class="pull-right"></a> 
      </p> 
      <p> 
       <span>Francis</span> 
       <a href="#" class="pull-right"></a> 
      </p> 
      <p> 
       <span>Mark</span> 
       <a href="#" class="pull-right"></a> 
      </p> 
      <p> 
       <span>Peter</span> 
       <a href="#" class="pull-right"></a> 
      </p> 
     </div> 
    </span> 
</div> 

Но, если я нажму кнопку, popover не будет отображаться.

Answer 1

Во-первых, исходя из собственного опыта, я рекомендую использовать angular-bootstrap для вещей в этой области.

Во-вторых, если вы действительно хотите, чтобы он работал, убедитесь, что сценарии начальной загрузки загружены правильно. Затем попробуйте прослушать событие click с помощью ng-click на кнопке и вызвать поп-панель на нем.

Вот код для достижения желаемого.

scope.popover = function() { 
     $("[data-toggle=popover]").popover({ 
      html: true, 
      content: $('.popper-content').html(), 
      placement: attrs.popoverPlacement 
     }); 
     }; 

Вот HTML:

<button type="button" popover-placement="bottom" class="popper btn-link" popover ng-click="popover()" data-toggle="popover"> 
     4 Peoples 
</button> 

Вот plunkr: https://plnkr.co/edit/fBPJ8LfOFGlgcCHvRWSM?p=preview

Есть много способов достижения того, что вы хотите. Кстати, я рекомендую вам прочитать:. "Thinking in AngularJS" if I have a jQuery background?

С уважением,