Как использовать Colorbox с Angular JS

Как я могу использовать colorbox (приветствуется fancybox или lightbox) с помощью Angular 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, в котором будет открыт идентификатор open-with-colorbox, будет отображаться как colorbox.

PS: Я новичок в Angular JS, поэтому я ищу решение, как использовать colorbox, я использую twitter bootstrap в своем приложении.

Ответ 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>

Ответ 2

Я пробовал директиву 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" />