如何将index.html中的内容放入我的view.html？

Question

我有类似这样的东西 。 我希望我的视图能够填充传递给指令的mapId。 然后我想表明这个观点代替“这是一些内容”。

首先，我如何将mapId传递到视图中？其次，如何在灯箱div中显示该视图？

我知道这有点模糊，但我是棱角分明的，所以我不知道这里需要什么其他信息。

Answer 1

我会使用来自Angular-UI bootstrap http://angular-ui.github.io/bootstrap/的模态，并根据我的情况进行调整。 我认为这是一个很好的起点。

Answer 2

您无法将view.html文件与当前的lighbox代码一起使用。 需要对其进行大量修改才能使用模板文件并隔离范围 。 但是，您可以使用当前代码来实现相同的功能，可能需要添加一个控制器来修改范围。

我修改了plunker中的index.html，以便显示mapId值。

让我们回顾一下angular-lightbox实际上在做什么：

通过仅返回一个函数，该指令将遍历整个编译过程，然后使用返回的函数作为链接器。 然后链接器继续（取决于选项）向DOM添加叠加层（灯箱的不透明深色背景），然后将灯箱活动类添加到div#lightbox 。 这个div已经存在于DOM中，但是由于CSS而被隐藏，并且已经由AngularJS编译和呈现，因此除了通过相同或子范围级别的双向数据绑定之外，它不能真正被更改。

我做了哪些更改：

我将一个绑定的范围变量添加到div#lightbox称为mapId并在按钮上添加了一个ng-click ，将mapId的值设置为1,2或3.所以当你点击按钮时，会显示div#lightbox ＆显示mapId的新值的值。

鉴于以上可能不是你想要完成的......

我们来谈谈如何去做

首先，您需要以某种方式将view.html加载到指令中。 只需让view.html内容成为指令内的字符串或使用$ templateCache即可 。

然后，您将需要$编译的HTML从view.html ，传入包含您想从该值的新范围options ，然后追加它div#lightbox 。