如何在Angular JS中使用Colorbox

Question

如何使用Angular JS使用colorbox(也欢迎使用fancybox或lightbox),如果我为它编写指令,是否还有其他方法.

这是我的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>
...

用户将单击展开按钮,并且具有open-with-colorbox id的div将作为colorbox打开.

PS:我是Angular JS的新手,这就是为什么我在寻找一个如何使用colorbox的解决方案,我在我的应用程序中使用twitter bootstrap.

Answer 1

写一个指令,这是最好的选择.

指令示例:

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

HTML:

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