How can I put content from my index.html into my view.html?

Question

I have something like this plunker . I would like my view to get populated with the mapId that gets passed into the directive. 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?

I know this is kinda vague but I'm new to angular so I don't know what other information is needed here.

Answer 1

I would use a modal from Angular-UI bootstrap http://angular-ui.github.io/bootstrap/ , and adapt it for my case. I think this is a good starting point.

Answer 2

You're not going to be able to use the view.html file with the current lighbox code. 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.

Let's go over what angular-lightbox is actually doing:

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 . 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.

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.

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. Either by just having the view.html contents be a string inside the directive or use $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 .