How should i use lightbox with angular

Question

I am using angular to shows the details of my Student Object

it is working fine

But also want the hyperlink on assignment text so that when someone click on that a lightbox opens with all the assignment object details.

Now my boss want to use angular only.

i know that i can use jquery modal dialog for that but how can i display lighbox in angularJs

Solution

You should be able to integrate this project:

https://github.com/compact/angular-bootstrap-lightbox

From the project's README, here's how it would be declared in your HTML:

Gallery:

<ul ng-controller="GalleryCtrl">
  <li ng-repeat="image in images">
    <a ng-click="openLightboxModal($index)">
      <img ng-src="{{image.thumbUrl}}" class="img-thumbnail" alt="">
    </a>
  </li>
</ul>

Just like @Stewie's solution, the heavy lifting logic is handled by an Angular Directive.

Comments

[pkozlowski.opensource]

Just for the record - directives from angular-ui.github.com/bootstrap are not proxing to the 3rd party JavaScript - those are native AngularJS directives, without any dependencies (even no jQuery).

[Stewie]

@pkozlowski.opensource Correct!

[SK.]

If someone reads, he/she get everything. No need of being here in this forum. It would help people if someone points to an example or at least point closure towards the requirement. For example JJ Zabkar did a great job.