如何使用彩盒与角JS(How to use Colorbox with Angular JS)

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

这是我的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具有开放与 - 颜色框ID会打开颜色框。

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

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>

Answer 2:

我曾尝试bmleite指令在我的代码，但它不工作。 该cboxElement类添加到元素，但点击时颜色框didnt打开。 最后，我发现这个指令，它的工作就像一个魅力。

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);      
            })
          }
        });
      });
    }
  };
});

然后在你的HTML部分与使用它：

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

文章来源: How to use Colorbox with Angular JS