[英]How can I put content from my index.html into my view.html?
I have something like this plunker . 我有类似这样的东西 。 I would like my view to get populated with the mapId that gets passed into the directive.
我希望我的视图能够填充传递给指令的mapId。 Then I would like to show that view in place of "This is some content".
然后我想表明这个观点代替“这是一些内容”。
First how can I pass the mapId into the view and secondly how can I then show that view in the lightbox div? 首先,我如何将mapId传递到视图中?其次,如何在灯箱div中显示该视图?
I know this is kinda vague but I'm new to angular so I don't know what other information is needed here. 我知道这有点模糊,但我是棱角分明的,所以我不知道这里需要什么其他信息。
I would use a modal from Angular-UI bootstrap http://angular-ui.github.io/bootstrap/ , and adapt it for my case. 我会使用来自Angular-UI bootstrap http://angular-ui.github.io/bootstrap/的模态,并根据我的情况进行调整。 I think this is a good starting point.
我认为这是一个很好的起点。
You're not going to be able to use the view.html file with the current lighbox code. 您无法将view.html文件与当前的lighbox代码一起使用。 It would need to be heavily modify to make use of template files and isolate scopes .
需要对其进行大量修改才能使用模板文件并隔离范围 。 However, you can use the current code to achieve the same thing with perhaps the addition of a controller to modify the scope.
但是,您可以使用当前代码来实现相同的功能,可能需要添加一个控制器来修改范围。
I've modified the index.html in the plunker so that it displays the mapId
value. 我修改了plunker中的index.html,以便显示
mapId
值。
Let's go over what angular-lightbox is actually doing: 让我们回顾一下angular-lightbox实际上在做什么:
By returning just a function, the directive is going through the whole compile process and then using the returned function as the linker. 通过仅返回一个函数,该指令将遍历整个编译过程,然后使用返回的函数作为链接器。 The linker then goes on to (depending on the options) add an overlay (the opaque dark background of the lightbox) to the DOM & then add the lightbox active class to
div#lightbox
. 然后链接器继续(取决于选项)向DOM添加叠加层(灯箱的不透明深色背景),然后将灯箱活动类添加到
div#lightbox
。 This div
is already in the DOM, but hidden due to the CSS, and has been already compiled & rendered by AngularJS so it can't really be changed other than through two-way data binding at the same or child scope level. 这个
div
已经存在于DOM中,但是由于CSS而被隐藏,并且已经由AngularJS编译和呈现,因此除了通过相同或子范围级别的双向数据绑定之外,它不能真正被更改。
What my changes did: 我做了哪些更改:
I added a bound scope variable to div#lightbox
called mapId
and added an ng-click
to the buttons that sets the value of mapId
to 1, 2, or 3. So when you click on the button, div#lightbox
is revealed & the value of the new value of mapId
is shown. 我将一个绑定的范围变量添加到
div#lightbox
称为mapId
并在按钮上添加了一个ng-click
,将mapId
的值设置为1,2或3.所以当你点击按钮时,会显示div#lightbox
&显示mapId
的新值的值。
Given that the above is probably not what you want to accomplish... 鉴于以上可能不是你想要完成的......
Let's talk about how to go about doing that 我们来谈谈如何去做
First you will need to load view.html
into the directive somehow. 首先,您需要以某种方式将
view.html
加载到指令中。 Either by just having the view.html
contents be a string inside the directive or use $templateCache . 只需让
view.html
内容成为指令内的字符串或使用$ templateCache即可 。
You will then need to $compile the HTML from view.html
, passing in a new scope that contains the values you want from options
, and then append it to div#lightbox
. 然后,您将需要$编译的HTML从
view.html
,传入包含您想从该值的新范围options
,然后追加它div#lightbox
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.