包装AngularStrap Popover

Question

我试图用自定义指令包装角带的弹出窗口。

popover应该能够使用由谁使用我的指令提供的自定义模板，模板应该能够使用控制器的范围。

对于我发现的范围部分，我可以向控制器范围传递$ popover服务。

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

这是一个掠夺者：http://plnkr.co/edit/9vTzR0fKcjOlP0bNjZUf?p=preview

有人能够解释为什么两个按钮打开相同的弹出窗口？我应该隔离范围吗？如果是，我怎么能使用原始控制器的范围来绑定变量？

由于

Answer 1

  

有人能够解释为什么两个按钮打开相同的弹出窗口吗？

因为两个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。