कोणीय और संकलन के साथ आंशिक पृष्ठ लोड करना नियंत्रक

Question

बड़े पैमाने पर आवेदन में, हमारे आवेदन की मॉड्यूलरिटी बढ़ाने के लिए हमारे वेब एप्लिकेशन को अलग आंशिक पृष्ठ में व्यवस्थित किया जा सकता है। कुछ मामलों में XHR या Ajax अनुरोध के माध्यम से लोड किए गए आंशिक पृष्ठ को संकलित करने के लिए या तो Angular $ http.get या JQuery $ .load का उपयोग करके एक त्रुटि उत्पन्न होगी।

उदाहरण के रूप में मेरे परिदृश्य का उपयोग करके, मैं वास्तव में कोहाना PHP फ्रेमवर्क का उपयोग कर रहा हूं ताकि मैं सर्वर स्तर पर अपने वेब एप्लिकेशन की मॉड्यूलरिटी को नियंत्रित कर सकूं। सामान्य रूप से सभी टेम्पलेट और पृष्ठ को देखने में अलग किया गया है, प्रस्तुति परत पर सभी HTML, JS और CSS को एक साथ छोड़कर।

यह क्लाइंट साइड प्रोसेसिंग पर जावास्क्रिप्ट एमवीडब्ल्यू/एमवीसी स्टैक को लागू करने के लिए मेरे लिए एक बड़ी लचीलापन देगा क्योंकि मेरा वेब ऐप बैक एंड एप्लिकेशन से डेटा लाने के लिए AJAX अनुरोध पर भारी निर्भर करता है। मेरे परिदृश्य में AngularJS का उपयोग कर रहा हूं और नीचे मॉडल से डेटा को क्लाइंट को प्रस्तुत करने के तरीके पर एक साधारण छद्म है।

Kohana मॉडल> ​​Kohana नियंत्रक> Kohana देखें> एक्सएचआर> JQuery \ कोणीय> डोम

अपने आवेदन में अपनी भूमिका की है कि वास्तव में मुझे टक्कर और मेरे पास चयापचय पेय की कुछ बोतलें पीने मिल देना आवेदन को हल करें। जहां मेरे पास एक मॉडल संवाद है और आंशिक पृष्ठ सर्वर से एक्सएचआर के माध्यम से लोड होता है और इसे चयनित डॉम से जुड़ा होता है।

समस्या जब यह एनजी नियंत्रक निर्देश यह समारोह संसाधित निर्देश की चर्चा करते हुए खोज कर रहे होंगे, जब कोणीय कोशिश आंशिक पेज संकलित करने के लिए, है। त्रुटि उत्पन्न हुई थी जहां नियंत्रक नहीं मिला क्योंकि यह अभी तक डोम पार्सर द्वारा मूल्यांकन नहीं किया गया है। लेकिन जब आप अपने आवेदन में आंशिक पृष्ठ लोड करने से पहले कहीं भी अपने आवेदन में फ़ंक्शन को पूर्व-डिलीयर करते हैं, तो सबकुछ ठीक है। नीचे दिया गया उदाहरण है कि मैं एक संवाद सेवा कैसे स्थापित करता हूं जिसे लिंक निर्देश पर क्लिक किया जाएगा जब मैंने कहा लिंक क्लिक किया था।

var dialogService = angular.module('dialog.service', []); 
dialogService.factory('Dialog', function($http,$compile){ 
    var dialogService = {}; 
    dialogService.load = function(url, scope){ 
     $("#dialog:ui-dialog").dialog("destroy"); 
     $("#dialog").attr('title','Atlantis'); 

     $http.get(url).success(function (data) { 
      html = $compile(data)(scope); 
      $('#dialog-content').html(html); 

      $("#dialog").dialog({ 
       width: '600px', 
       buttons: { 
        "Ok": function() { 
         $(this).dialog("close"); 
         return true; 
        }, 
       }, 
       close: function(){ 
        if (typeof (onClose) == 'function') { onClose(); } 
       }, 
      }); 
     }); 
    } 

    return dialogService; 
}); 

कुछ शोध के बाद मुझे कुछ समाधान मिला है और मेरे जैसे शुरुआती लोगों के लिए मेरे उत्तर पर फेलो के साथ साझा करना है। (मेरी अंग्रेजी के लिए खेद है)।

Answer 1

इस सेटअप पर एंगुलरजेएस पर कुछ भी गलत नहीं है, अन्य जेएस गुरु वहां से पहले ही समाधान को जानते हैं और हमारे साथ साझा करने में बहुत व्यस्त हैं जबकि एक और शानदार वेब विकास उपकरण या ढांचे का आविष्कार करते हैं। यह ठीक है कि ऐसा करते रहो। यह एक अच्छा या अल्टीमेटम समाधान नहीं हो सकता है, कृपया हमारे साथ कोई सुधार या टिप्स साझा करें!

इस समस्या को हम सेटअप करने के लिए रणनीति की जरूरत को दूर करने, मुझे एक उदाहरण कोड के साथ शुरू तो हमारे मस्तिष्क जबकि जानकारी के माध्यम से बह पचाने जाएगा। कोड के नीचे प्लेसहोल्डर है जहां मैं JQuery का उपयोग करके मोडल डायलॉग बनाता हूं और अजाक्स सामग्री डाली जाएगी।

<div ng-app="asng" id="dialog" title="" style="display:none"> 
    <div id="dialog-content"></div> 
</div> 

बुनियादी ज्ञान के रूप में, हम कैसे डोम पार्सर काम कर रहे हैं पर समझना होगा। हम सोच सकते हैं कि डोमप (डोम पार्सर) एक बहु थ्रेडेड है और इसी कारण से हम समानांतर में एकाधिक बाहरी संसाधन लोड कर सकते हैं। वास्तव में डोम तत्व सूचकांक को ऊपर से नीचे तक पार्स करते समय डीओएमपी एकल थ्रेड किया जाता है। नीचे आंशिक पृष्ठ पर उदाहरण दिया गया है जिसे मैं # संवाद-सामग्री DIV तत्व में लोड करने वाला हूं।

<script language="JavaScript" type="text/javascript"> 
    function Transaction ($scope,$http){ 
     $scope.items = [{"country":"VN","quantity":"100"}]; 
     $scope.country_name = $scope.items; 
    } 
</script> 

<style> 
</style> 

<div id="transaction-panel" class="user" data-ng-controller="Transaction"> 
     <form id="{{ form_name }}" action=""> 
     Country : [[ items.country ]] </br> 
     Total : [[ items.quantity ]] 
    </form> 
</div> 

असल में इन आंशिक अभी भी, एक त्रुटि दे रही है, हालांकि हम अभी एनजी नियंत्रक निर्देश के साथ तत्व से पहले स्क्रिप्ट ब्लॉक डाल दिया है। वास्तव में वास्तव में ऐसा नहीं है, बात यह है कि हम से निपटने के लिए की जरूरत है कि कैसे AngularJS संकलन सेवा आंशिक डोम संकलन कर रहे हैं। ऊपर दिए गए मेरे प्रश्न भाग पर वापस जाने दो और निरीक्षण करें कि हम कहां संकलित चीज करते हैं।

html = $compile(data)(scope); 
$('#dialog-content').html(html); 

प्रथम रेखा से ऊपर डेटा चर में डोम संकलन होगा, और जड़ डोम में सम्मिलित दुर्भाग्य से पहली पंक्ति एक त्रुटि चिल्लाना होगा: नियंत्रक लेन-देन नहीं मिला।

ऐसा इसलिए होता है क्योंकि आपके आंशिक पृष्ठ में स्क्रिप्ट ब्लॉक अभी तक डीओएमपी पार्सर द्वारा मूल्यांकन नहीं किया गया है क्योंकि रूट डीओएमपी में डाला नहीं गया है। अब आप प्रकाश ठीक है, इसलिए हमने संकलन रणनीति थोड़ा बदलने के लिए, नए डोम डालने से है और फिर हम वापस नीचे सम्मिलित किया डोम देखने के उदाहरण पार्स होगा: -

html = $('#dialog-content').html(data); 
$compile(html)(scope); 

स्लिम और सरल उपाय है, यह इस समस्या को हल करने के लिए मुझे कुछ सिर धमाकेदार सुबह ले गए क्योंकि सिर्फ डीओएम पार्सिंग पर सरल अवधारणा को अनदेखा कर दिया गया था।

Answer 2

यदि मैं समझता हूं कि आप क्या करने का प्रयास कर रहे हैं, तो यह एक साधारण उदाहरण है।

मैं AJAX के माध्यम से एक Django रूप में पोस्ट करना चाहता था और फिर पृष्ठ में फॉर्म सामग्री को वापस मार्कअप के साथ बदलना चाहता था। ;

.controller('MyForm', function($element, $compile, $scope){ 
    var scope = $scope; 
    var $theForm = $element; 
    var $formBlock = $element.find('.the_form'); // is replaced by the form response 
    $element.find('.submit_the_form').click(function(){ 
     // submit the form and replace contents of $formBlock 
     $.post($theForm.attr('action'), $theForm.serialize(), function(response){ 
      var newstuff = $formBlock.html(response); 
      $compile(newstuff)(scope); // loads the angular stuff in the new markup 
     }); 
    }); 
}) 

मुझे लगता है कि लाइन में आपकी रुचि है $ है संकलन (newstuff) (गुंजाइश): लौटे मार्कअप एक एनजी नियंत्रक, जो मैं निष्पादित करने के लिए जब यह लोड करता है की जरूरत भी शामिल है

संपादित करें: क्रिक, आज सुबह किसी अन्य मार्कअप के साथ यह कोशिश की और काम नहीं किया, क्योंकि किसी भी कारण से मैं समझ नहीं पाया। बाहर निकला कि अगर मेरे पास एनजी-मॉडल के साथ कोई फ़ील्ड नहीं है, तो नए मार्कअप में, तो $ संकलन निष्पादित नहीं होता है। जोड़ा गया:

<input type="hidden" name="dummy" value="0" ng-model="dummy"/> 

... और अब यह संकलित करता है।