包装 AngularStrap Popover

Question

我正在尝试使用自定义指令包装 angular 表带的弹出窗口。

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

对于我发现的范围部分，我可以将控制器的范围传递给 $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.showPopover。由于本例中的两个实例都共享相同的范围，您在第一个 scope.showPopover 被写入的情况下，然后第二次使用该指令并且 scope.showPopover 被一个指向的版本覆盖到第二个元素。

解决这个问题其实很简单。由于您可以访问 link 函数中的元素，您实际上可以在那里添加一个点击处理程序，而不必担心处理这样的范围冲突。这也使您的指令更加独立。这是 an example，它使用 element.on 而不是遍历范围并使用 ngClick。

Answer 2

Is anybody able to explain me why the two buttons are opening the same 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

包装 AngularStrap Popover

Wrapping AngularStrap Popover

javascript

angularjs

twitter-bootstrap

angular-strap