Wie man Colorbox mit Angular JS verwendet

Question

Wie kann ich Colorbox (Fancybox oder Lightbox sind auch willkommen) mit Angular JS verwenden, soll ich dafür eine Direktive schreiben oder gibt es andere Methoden dafür?

Hier ist mein HTML:

...

            Erweitern

...

...

Der Benutzer klickt auf die Schaltfläche "Erweitern" und das div mit der ID "open-with-colorbox" wird als Colorbox geöffnet.

PS: Ich bin neu in Angular JS, deshalb suche ich nach einer Lösung, wie man Colorbox verwendet. Ich verwende auch Twitter Bootstrap in meiner Anwendung.

Answer 1

Schreiben Sie eine Direktive, es ist die beste Option.

Beispiel für eine Direktive:

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

HTML:

Bild

Answer 2

Ich habe die bmleite-Direktive in meinem Code ausprobiert, aber sie funktioniert nicht. Die cboxElement-Klasse wurde dem Element hinzugefügt, aber Colorbox wurde nicht geöffnet, wenn darauf geklickt wurde. Schließlich habe ich diese Direktive gefunden, die wie ein Zauber funktioniert hat.

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

Dann verwenden Sie es in Ihrem HTML-Abschnitt mit: