Обертывание AngularStrap Popover

Question

Я пытаюсь надеть накладку углового ремешка с помощью специальной директивы.

Попутчик должен иметь возможность использовать пользовательский шаблон, предоставленный тем, кто использует мою директиву, и шаблон должен иметь возможность использовать область действия контроллера.

Для части области, которую я нашел, я могу перейти в $ popover service в область действия контроллера.

var myPopover = $popover(element, { 
       title: 'My Title', 
       placement : 'top', 
       contentTemplate: 'example.html', 
       html: true, 
       trigger: 'manual', 
       autoClose: true, 
       scope: scope 
      }); 

Вот plunker: http://plnkr.co/edit/9vTzR0fKcjOlP0bNjZUf?p=preview

Кто-нибудь может объяснить мне, почему эти две кнопки открытия же поповер? Должен ли я выделить область? Если да, как я мог бы использовать область исходного контроллера для привязки переменных?

Благодаря

Answer 1

Может ли кто-нибудь объяснить мне, почему две кнопки открывают один и тот же popover?

Поскольку оба директивы customPopover имеют одинаковый объем. Вы хотите указать директиву для создания изолированной области для отдельной директивы.

Добавить scope: true:

app.directive("customPopover", ["$popover", "$compile", function($popover, $compile) { 
    return { 
     scope: true, 
     restrict: "A", 
     link: function(scope, element, attrs) { 
      var myPopover = $popover(element, { 
       title: 'My Title', 
       placement : 'top', 
       contentTemplate: 'example.html', 
       html: true, 
       trigger: 'manual', 
       autoClose: true, 
       scope: scope 
      }); 

      scope.showPopover = function() { 
       myPopover.show(); 
      } 
     } 
    } 
}]); 

Демо:http://plnkr.co/edit/2esMcQSLjDxdj7zESXD2?p=preview

Answer 2

Проблема в данном случае является то, что каждый раз, когда вы используете customPopover он устанавливает scope.showPopover. Поскольку два экземпляра в этом случае имеют одну и ту же область, в которой вы находитесь, в ситуации, когда записывается первая scope.showPopover, тогда директива используется во второй раз и в области scope.showPopover записывается с версией, которая указывает на второй элемент ,

Решение на самом деле очень простое. Поскольку у вас есть доступ к элементу в функции ссылок, вы можете просто добавить обработчик кликов и не беспокоиться о том, как справиться с такими конфликтами. Это также делает вашу директиву более самодостаточной. Вот an example, который использует element.on вместо того, чтобы проходить через область действия и использовать ngClick.