AngularJS Fancybox Popup

Question

Ich habe ein angularjs Projekt gestartet und möchte fancybox implementieren.

Dazu habe ich die jQuery und fancybox Plugins zur Lösung hinzugefügt. Ich versuche, die Vorlage in dem unten gezeigten Code in einem Fancybox-Fenster zu öffnen.

Ansicht

<a href="" ng-click="openPage('popups/add.html')">ADD</a>

-Controller

app.controller('MainController', 
    function MainController($scope) { 
     $scope.user = "Hey Welcome"; 

     $scope.open = function(template_path){ 
      $.fancybox({"href":template_path}) 
     } 
    } 
) 

Und Popup/add.html

<div class="pop-contnr"> 
    <h2>ADD</h2> 
    <table> 
     <thead> 
      <tr> 
       <th align=center>{{user}}</th> 
      </tr> 
     </thead> 
    </table> 
</div> 

Fancybox öffnet erfolgreich ein Fenster mit der Vorlage, aber der Ausdruck {{user}} wurde nicht ausgewertet. Kann mir bitte jemand helfen?

Answer 1

Ich habe eine Richtlinie für fancybox erstellt

app.directive('fancybox',function($compile, $timeout){ 
    return { 
     link: function($scope, element, attrs) { 
      element.fancybox({ 
       hideOnOverlayClick:false, 
       hideOnContentClick:false, 
       enableEscapeButton:false, 
       showNavArrows:false, 
       onComplete: function(){ 
        $timeout(function(){ 
         $compile($("#fancybox-content"))($scope); 
         $scope.$apply(); 
         $.fancybox.resize(); 
        }) 
       } 
      }); 
     } 
    } 
}); 

Answer 2

Hier ist eine vereinfachte Version eines fancybox Richtlinie mein Team und ich schrieb fancyboxes auf einer Vorlage mit einem einzigen Klick auf Basis zu öffnen.

Es wird im Markup wie folgt aufgerufen:

<div fancybox ng-click="openFancybox('templateUrl')"> </div> 

Der Code für die Richtlinie ist:

app.directive('fancybox', function ($compile, $http) { 
    return { 
     restrict: 'A', 

     controller: function($scope) { 
      $scope.openFancybox = function (url) { 

       $http.get(url).then(function(response) { 
        if (response.status == 200) { 

         var template = angular.element(response.data); 
         var compiledTemplate = $compile(template); 
         compiledTemplate($scope); 

         $.fancybox.open({ content: template, type: 'html' }); 
        } 
       }); 
      }; 
     } 
    }; 
}); 

Es kann arbeiten in diesem I plunker

Answer 3

die answer above erweitert zu sehen um den Template-Cache von Angular zu verwenden.

Es wird im Markup wie folgt aufgerufen:

<div fancybox fancybox-template="template.html">Open Fancybox</div> 

Der Code für die Richtlinie ist:

app.directive('fancybox', function ($templateRequest, $compile) { 
    return { 
     scope: true, 
     restrict: 'A', 
     controller: function($scope) { 
      $scope.openFancybox = function (url) { 
       $templateRequest(url).then(function(html){ 
        var template = $compile(html)($scope); 
        $.fancybox.open({ content: template, type: 'html' }); 
       }); 
      }; 
     }, 
     link: function link(scope, elem, attrs) { 
      elem.bind('click', function() { 
       var url = attrs.fancyboxTemplate; 
       scope.openFancybox(url); 
      }); 
     }, 
    } 
}); 

Hier ist die plunker.