如何使用带有角JS的Colorbox ?

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.

我如何使用colorbox (fancybox或lightbox也是受欢迎的)与有棱角的JS，如果我为它写指令，是否有其他方法。

Here is my HTML:

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

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

用户将单击展开按钮，具有打开-colorbox id的div将作为colorbox打开。

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.

PS:我对角度JS很陌生，这就是为什么我在寻找如何使用colorbox的解决方案，我在我的应用程序中使用twitter bootstrap。

2 个解决方案

#1

Write a directive, it's the best option.

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

Directive example:

指令的例子:

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

HTML:

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

#2

I have tried bmleite directive in my code but it doesnt work. The cboxElement class added to the element but colorbox didnt open when clicked. Finally i found this directive which worked like a charm.

我在我的代码中尝试过bmleite指令，但它不起作用。添加到元素的cboxElement类，但在单击时不打开colorbox。最后我找到了这个指令，它就像一个咒语。

app.directive('colorbox', function($compile, $rootScope){
  return {
    link: function(scope, element, attrs){
      element.click('bind', function(){
        $.colorbox({
          href: attrs.colorbox,
          onComplete: function(){
            $rootScope.$apply(function(){
              var content = $('#cboxLoadedContent');
              $compile(content)($rootScope);      
            })
          }
        });
      });
    }
  };
});

Then in your html section use it with:

然后在你的html部分使用它与:

<img src="path_to_image" colorbox="path_to_large_image" />

#1