javascript - 包裹 AngularStrap Popover

Question

我正在尝试用自定义指令包裹 Angular 带的弹出框。

弹出窗口应该能够使用由使用我的指令的人提供的自定义模板，并且该模板应该能够使用 Controller 的范围。

对于范围部分，我发现我可以将 Controller 的范围传递给 $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

有人能解释一下为什么这两个按钮打开同一个弹出窗口吗？我应该隔离范围吗？如果是，我如何使用原始 Controller 的范围来绑定(bind)变量？

谢谢

Answer 1

Is anybody able to explain me why the two buttons are opening the same popover?

因为两个 customPopover 指令共享相同的作用域。您想要指示指令为单个指令创建隔离的范围。

添加范围: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