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

【问题标题】：How can I put content from my index.html into my view.html?如何将 index.html 中的内容放入 view.html？
【发布时间】：2014-03-15 05:34:52
【问题描述】：

我有类似plunker 的东西。我希望我的视图被传递到指令中的 mapId 填充。然后我想展示那个视图来代替“这是一些内容”。

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

我知道这有点含糊，但我是 angular 新手，所以我不知道这里还需要什么其他信息。

【问题讨论】：

标签： javascript html css angularjs angularjs-directive

【解决方案1】：

您将无法将 view.html 文件与当前的 lightbox 代码一起使用。它需要进行大量修改才能使用template files and isolate scopes。但是，您可以使用当前代码来实现相同的目的，或许还可以添加一个控制器来修改范围。

我修改了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。

然后，您需要从view.html 中$compile HTML，从options 传入一个包含您想要的值的新范围，然后将其附加到div#lightbox。

【讨论】：

【解决方案2】：

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

【讨论】：