javascript - 如何在 Angular 中单击时调用 ng-lightbox 指令？

Question

我正在尝试在用户单击链接时生成一个灯箱。我正在使用这个灯箱代码 here .我正在处理这个 jsbin .

我这里有这段代码:

<button ng-click="add_overlay()">Button</button>
<div class="lightbox" ng-lightbox='{"trigger": "manual"}' id="lightbox">
  <h1>This is some content</h1>
</div>

我想通过添加 ng-click 来调用叠加层，它会在点击时显示它，但它似乎不起作用。我从不棱 Angular 分明，所以一般来说，任何帮助都将不胜感激。如何在点击时生成灯箱？

Answer 1

首先，在 ngLightbox 指令之外，您无法访问 add_overlay()，因此 Angular 不知道该方法在您的 上下文中是什么>ng-点击。

您还使用了两个版本的 Angular 源代码，1.2.1 和 1.0.7。

如果您查看 angular-lightbox 源代码，您会看到一个可覆盖的 defaults 对象，这样您就可以提供您希望将灯箱应用到的元素:

var defaults = {
    'class_name': false,
    'trigger': 'manual',
    'element': element[0],
    'kind': 'normal'
}

所以，像这样设置你的按钮，指定预期的元素:

<button ng-lightbox='{"trigger": "manual", "element": "lightbox"}'>Button</button>

Here's a working demo .