एंगुलरजेएस फैंक्सबॉक्स पॉपअप

Question

मैंने एक कोणीय परियोजना शुरू की है और मैं फैंक्सबॉक्स को कार्यान्वित करना चाहता हूं।

इसके लिए, मैंने समाधान में jQuery और fancybox प्लगइन्स शामिल किए हैं। मैं एक फैंसीबॉक्स विंडो में नीचे दिखाए गए कोड में टेम्पलेट खोलने का प्रयास कर रहा हूं।

देखें

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

नियंत्रक

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

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

और पॉपअप/add.html

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

फैंक्सबॉक्स ने टेम्पलेट युक्त विंडो खोलने में सफलतापूर्वक खुलती है, लेकिन {{user}} अभिव्यक्ति का मूल्यांकन नहीं किया गया है। क्या कोई मदद कर सकता है?

Answer 1

मैं है 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

यहाँ के लिए एक निर्देश बना ली हैं fancybox निर्देश मेरी टीम का एक सरलीकृत संस्करण है और मैं एक क्लिक के साथ टेम्पलेट पर आधारित Fancyboxes खोलने के लिए लिखा था।

यह इस तरह मार्कअप में शुरू हो जाती है:

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

निर्देश के लिए कोड है:

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

यह इस plunker

Answer 3

में काम कर रहा answer above बढ़ाया देखा जा सकता है कोणीय के टेम्पलेट कैश का उपयोग करने के लिए।

यह इस तरह मार्कअप में शुरू हो जाती है:

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

निर्देश के लिए कोड है:

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

यहाँ plunker है।