如何使用彩盒与JS角 [英] How to use Colorbox with Angular JS

问题描述

我如何使用颜色框（或的fancybox灯箱是值得欢迎的太）与角JS，我应该写一个指令，它有没有其他方法了。

How can I use colorbox (fancybox or lightbox is welcome too) with Angular JS, should I write a directive for it is there any other methods for it.

下面是我的HTML：

...
<h2 class="box-header">
    <i class="icon-hdd"></i>    
    <div class="btn-group pull-right">      
        <a class="btn btn-mini">
            <i class="icon-zoom-in"></i>
            Expand
        </a>
    </div>
</h2>   
<div id="open-with-colorbox">
...
</div>
...

用户会点击扩展按钮和DIV具有开放与 - 颜色框标识会打开颜色框

User will click expand button and div that has open-with-colorbox id will open as colorbox.

PS：我是新来的角JS这就是为什么我要寻找一个解决方案如何使用颜色框，我使用Twitter的引导在我的应用

PS: I am new to Angular JS that's why I am looking for a solution how to use colorbox, I use twitter bootstrap at my application.

推荐答案

写指令，这是最好的选择。

Write a directive, it's the best option.

指令例如：

app.directive('colorbox', function() {
  return {   
    restrict: 'AC',    
    link: function (scope, element, attrs) {        
      $(element).colorbox(attrs.colorbox);     
    }
  };  
});

HTML

<a colorbox="{transition:'fade'}" href="...">Image</a>

这篇关于如何使用彩盒与JS角的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！