AngularJS Fancybox Popup

Question

Ho avviato un progetto angularjs e vorrei implementare fancybox.

Per questo, ho incluso i plugin jQuery e fancybox per la soluzione. Sto tentando di aprire il modello nel codice mostrato di seguito in una finestra di fancybox.

View

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

E comparsa/add.html

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

Fancybox apre correttamente una finestra contenente il modello, ma l'espressione {{user}} non è stata valutata. Qualcuno può aiutare, per favore?

Answer 1

ho creato una direttiva per fancybox

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

Ecco una versione semplificata di una direttiva fancybox mio team e ho scritto di aprire fancyboxes sulla base di un modello con un solo clic.

Viene richiamato nel codice come questo:

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

Il codice per la direttiva è:

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

Si può notare che lavorano in questo plunker

Answer 3

ho esteso il answer above usare la cache dei modelli di Angular.

viene richiamata nel codice come questo:

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

Il codice per la direttiva è:

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

Ecco il plunker.