2013-07-15 6 views
5

के साथ AngularJS का उपयोग करना मेरे पास कुछ AngularJS सामान हैं जिनमें सरणी और डेटा का एक गुच्छा है। एक बार जब कोई उपयोगकर्ता फ़ाइल अपलोड करता है, तो फ़ाइल को पार्स हो जाता है और इसके विभिन्न सरणी के साथ दायरे में सहेजा जाता है। हालांकि, इस सब के बाद और फ़ाइल दायरे में आयोजित की जाती है, मैं आंतरिक HTML को अपडेट करने का प्रयास करता हूं, लेकिन AngularJS कोड काम नहीं करता है। मैं ng-repeat का उपयोग सरणी के आधार पर एक टेबल बनाने के लिए करता हूं, लेकिन यह {{column}} और इस तरह की सामग्री के साथ एक एकल सेल बना हुआ है।आंतरिक HTML

मैं अत्यधिक कठिनाई निर्देशों और टेम्पलेट का उपयोग कर, क्योंकि मेरी index.html का कहना पड़ा है कि app और module, आदि के रूप में जब मैं app.directive(...

कुछ इस तरह करते हैं, अपरिभाषित हैं मेरी index.html फ़ाइल के महत्वपूर्ण भागों में शामिल हैं:

<html ng-app> 
... //once a file is uploaded, total.js is called; 
//this was so the app didn't try to run before a file was uploaded 
<div id="someStuff">This will become a table once a file is uploaded</div> 

यह कैसे मेरे गुंजाइश total.js में स्थापित किया है एक सरल उदाहरण है:

function sheet($rootScope, $parse){ 
    $rootScope.stuff = text; 
//text is a variable that contains the file's contents as a string 
}; 

document.getElementById('someStuff').innerHTML="<div ng-controller='sheet'>{{stuff}}</div>"; 

एचटीएमएल बदलता है लेकिन फ़ाइल की सामग्री को प्रिंट करने के बजाय, यह केवल {{stuff}} प्रिंट करता है। मैं आंतरिक HTML को यह समझने के लिए कैसे प्राप्त कर सकता हूं कि इसमें एंगुलरजेएस शामिल है, अधिमानतः आंशिक या निर्देश का उपयोग किए बिना, जब तक कि आप पूरी तरह से व्याख्या नहीं कर सकें कि मैं इसे कहां इनपुट करूँगा और इसका वाक्यविन्यास।

संपादित करें 1: मैंने $ संकलन का उपयोग करने का प्रयास किया है लेकिन इसे अपरिभाषित के रूप में चिह्नित किया गया है। संकलन समस्या को समझने के लिए मैंने this पर देखा, लेकिन मुझे rtcherry के वाक्यविन्यास को समझ में नहीं आता है, और मुझे इसे अपने कोड पर कैसे लागू करना चाहिए।

संपादित करें 2: मैं अभी भी प्राप्त $ अपरिभाषित त्रुटियों संकलन जब मैं यह इतना की तरह शामिल हैं:

function sheet($rootScope, $parse, $compile){...}; 
document.getElementById('someStuff').innerHTML=$compile("<div ng-controller='sheet'> 
{{stuff}}</div>")(scope); 

संपादित करें 3: जबकि itcouldevenbeaboat की टिप्पणी बेहद बेकार था, मैंने तय कर लिया मैं इस शो शायद चाहिए आप निर्देशक तरीके से मैंने इसे करने का प्रयास किया।

मैं अपने चादर समारोह के तहत इस कोड में शामिल हैं:

var app = angular.module('App', []); 
app.directive('spreadsheeet', function($compile){ 
    return{ 
     templateUrl: innerHTML.html 
    } 
}); 

कहाँ innerHTML <div ng-controller='sheet'>{{stuff}}</div> होता है और index.html पर मैं <div spreadsheet></div>

इस के साथ

को शामिल किया है, मैं कोई त्रुटि प्राप्त करते हैं, लेकिन पाठ करता है दिखाई नहीं दे रहा है, न तो {{stuff}} या फ़ाइल की सामग्री के रूप में। यहां तक ​​कि जब मैं कुछ सरल करता हूं, जैसे कि template: "<h2>Hello!</h2>"templateUrl के बजाय, मुझे प्रिंट करने के लिए Hello! नहीं मिल सकता है।

+3

innerHTML = $ संकलन ("

{{stuff}}
") (गुंजाइश) –

+0

आप inj कर सकते हैं ect $ अन्य कोणीय सेवाओं/उपकरणों की तरह संकलन। वैसे ही जैसे आप $ स्कोप या $ रूटस्कोप का उपयोग करना चाहते हैं। – alfrescian

+0

मुझे अभी भी त्रुटियां मिलती हैं। कृपया मेरा नवीनतम संपादन देखें। – user2494584

उत्तर

4

यह मेरे लिए काम करता

document.getElementById('someStuff').innerHTML = "<div ng-controller='sheet'>{{stuff}}</div>"; 
$compile(document.getElementById('someStuff'))($scope); 
0

सरल समाधान (यह 100% काम करेंगे):

नियंत्रक में, मत भूलना एक निर्भरता के रूप में नियंत्रक में $ दस्तावेज़ सुई, इस तरह:

App.controller('indiaController', function ($scope, $document,$filter, $location) { 

    var text_element = angular.element($document[0].querySelector('#delhi'); 
    text_element.html('your dynamic html placed here'); 
} 
संबंधित मुद्दे