Reputation: 12215
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.
Upvotes: 0
Views: 180
Reputation: 1370
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
.
Upvotes: 1
Reputation: 12140
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.
Upvotes: 1