Angularjs 如何将Colorbox与Angular JS一起使用

我如何在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>
...

。。。
扩大
...
...

用户将单击展开按钮，打开了colorbox id的div将作为colorbox打开

---

PS:我是Angular JS新手，这就是为什么我在寻找解决方案如何使用colorbox，我在我的应用程序中使用twitter引导。

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

指令示例：

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

HTML:

---

我在代码中尝试了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);      
            })
          }
        });
      });
    }
  };
});

然后在html部分将其与以下内容一起使用：

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

restrict在这里是什么意思？restrict指的是声明样式，

A

表示属性，

C

表示类。您可以检查有关此的详细信息（搜索“restrict”）。它尝试在新页面上打开它。如何防止它？您确定正在加载该指令吗？在新页面上打开是默认的

行为，如果应用了指令，则应自动阻止该行为。尝试调试并检查行

$（元素）.colorbox（attrs.colorbox）。@pulkitsinghal它似乎只缺少
href
，其余的似乎是正确的。如何从控制器调用下面的内容。不可能从控制器呼叫吗。我对angularjs很陌生。这意味着colorbox不是一个函数。我已经包括了所有js、css文件。$。颜色框（{iframe:true，宽度：“100%”，高度：“100%”，href:“http://“+result，}）
<img src="path_to_image" colorbox="path_to_large_image" />