javascript 我应该如何使用带角度的灯箱

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/15082400/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-26 23:25:36  来源:igfitidea点击:

How should i use lightbox with angular

javascriptangularjs

提问by user192082107

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

我正在使用 angular 来显示我的细节 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 objectdetails.

但也需要作业文本上的超链接,以便当有人点击它时,会打开一个包含所有assignment object详细信息的灯箱。

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

我知道我可以为此使用 jquery 模态对话框,但是如何在 angularJs 中显示灯箱

回答by JJ Zabkar

You should be able to integrate this project:

您应该能够集成这个项目:

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

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

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

在项目的 README 中,以下是它在 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>

画廊:

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

就像@Stewie 的解决方案一样,繁重的逻辑由 Angular 指令处理。

回答by Stewie

Go learn about Angular directivesand take a look at how AngularUIor UI Bootstraputilizes directives to proxy the invocations to jQuery plugins.

去了解Angular 指令并看看AngularUIUI Bootstrap如何利用指令将调用代理到 ​​jQuery 插件。