13

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 がカラーボックスとして開きます。

PS:私は Angular JS を初めて使用するので、カラーボックスの使用方法の解決策を探しています。アプリケーションで Twitter ブートストラップを使用しています。

4

2 に答える 2

15

ディレクティブを作成します。これが最適なオプションです。

ディレクティブの例:

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

HTML:

<a colorbox="{transition:'fade'}" href="...">Image</a>
于 2013-02-01T09:16:15.607 に答える