javascript - Isolated scope directive with two way binding doesn't reflect changes in controller's scope -
सारांश: एक क्षेत्र चर (एक सरणी ) जो एक अलग स्कॉडेड निर्देश के भीतर दो तरह से डेटा बाध्यकारी के लिए निर्धारित किया गया है, पृथक क्षेत्र निर्देश के भीतर चर के संशोधनों में नियंत्रक के दायरे के भीतर परिवर्तन को प्रतिबिंबित नहीं होता है। खिलौना उदाहरण: वर्तमान में मेरे पास एक सॉर्टिंग डायरेक्टिव है, जो कि एनजी-दोहराव का प्रयोग कर रही तालिका पर परिभाषित करना चाहते हैं I एनजी पुनरावृत्ति तालिका बनाने के लिए मैं सॉर्टिंग डायरेक्टिव को उसी डेटा को अपने पृथक गुंजाइश के भीतर से हेरफेर करना चाहता हूं। निर्देश के रूप में निम्नलिखित के रूप में सेट अप करें सूचकांक में निम्न के रूप में संदर्भित <पूर्व> लिंक फ़ंक्शन में एक क्लिक हैंडलर तालिका शीर्ष लेख को असाइन किया गया है इस हैंडलर पर क्लिक करने पर ये परिवर्तन नियंत्रक के अंदर से किए गए नहीं हैं और इस प्रकार तालिका अपेक्षित के रूप में नहीं बदलती है क्या यह एक वेनिला जे एस समस्या है, (गलत संदर्भ बना रहे हैं, आदि ...) या यह मेरे कोणीय निर्देश के साथ कुछ है। किसी भी तरह से, मैं गलत क्या कर रहा हूं और यह कैसे तय किया जा सकता है? कोड: plunkr index.html <पूर्व> script.js मुद्दा यह है कि आप स्कोप नहीं कॉल कर रहे हैं। आपके क्लिक फ़ंक्शन में: डेमो: : Scopes प्रणाली के माध्यम से किसी भी मॉडल परिवर्तनों को देखने के लिए एपीआई ($ लागू) प्रदान करते हैं "कोनालर दायरे" के बाहर से (नियंत्रकों, सेवाओं, काजल घटना संचालकों)। ATableController नियंत्रक क्षेत्र में समान डेटा का उपयोग कर रहा है:
$ scope.tableData = [{'col1': 1, 'col2 ':' एफएएफ '}, {' कॉल 1 ': 2,' कोलो 2 ':' एए '}, {' कॉल 1 ': 3,' कोला 2 ':' बीबीबी '}, {' कोलो 1 ': 4,' कोला 2 ': 'सीसीसी'}];
< कोड> ... गुंजाइश: {tableSortData: '=', tableSortRowAccessor: '=', tableSortPrimer: '='}, ...
... & lt; body ng-controller = "एटेबल कंट्रोलर" & gt; & Lt; तालिका सारणी-सॉर्ट टेबल-सॉर्ट-डेटा = "टेबलडेटा" & gt; ...
सॉर्ट फ़ंक्शन बंद हो जाता है, जो अंततः इस लाइन की कोड चलाता है।
scope.tableSortData = []; // जो वास्तविक कोड में एक सॉर्टिंग लाइन होगी
& lt; head & gt; & Lt; script src = "// cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> & Lt; स्क्रिप्ट डेटा -रूपी = "angular.js@*" डेटा-सेवर = "1.2.0" src = "http://code.angularjs.org/1.2.0/angular.js" & gt; & lt; / स्क्रिप्ट & gt ; & Lt; link rel = "स्टाइलशीट" href = "style.css" / & gt; & Lt; script src = "script.js" & gt; & lt; / स्क्रिप्ट & gt; & Lt; / head & gt; & Lt; body ng-controller = "एटेबल कंट्रोलर" & gt; & Lt; तालिका सारणी-सॉर्ट टेबल-सॉर्ट-डेटा = "टेबलडेटा" & gt; & LT; thead & gt; & LT; टीआर & gt; & LT; वें & gt; स्तंभ 1 & lt; / वें & gt; & LT; वें & gt; Column2 & lt; / वें & gt; & Lt; / टीआर & gt; & Lt; / thead & gt; & LT; tbody & gt; & Lt; tr ng-repeat = "तालिका डेटा में पंक्ति" & gt; & LT; टीडी & gt; {{row.col1}} & lt; / टीडी & gt; & LT; टीडी & gt; {{row.col2}} & lt; / टीडी & gt; & Lt; / टीआर & gt; & Lt; / tbody & gt; & Lt; / तालिका & gt; & Lt; / body & gt; & Lt; / html & gt;
var myApp = angular.module ('myApp', [])। नियंत्रक ('एटेबल कंट्रोलर', फ़ंक्शन ($ गुंजाइश) {$ Scope.tableData = [{'col1': 1, 'col2': 'fff'}, {'col1': 2, 'col2': 'aaa}}, {' col1 ': 3,' col2 ': 'Bbb'}, {'col1': 4, 'col2': 'ccc'}];})। डायरेक्टिव ('टेबल सॉर्ट', [फ़ंक्शन] {वापसी {प्रतिबंधित करें: 'ए', प्रतिस्थापित करें: गलत, गुंजाइश: {TableSortData: '=', tableSortRowAccessor: '=', tableSortPrimer: '='}, लिंक: फ़ंक्शन (स्कोप, तत्व) {console.log (scope.tableSortData); // शीर्ष लेख element.find पर ' वें ')। पर (' क्लिक.हेडर ', फ़ंक्शन (इवेंट) {var फ़ील्ड = $ (event.target) .attr (' फील्ड-नाम '); augmentTableSortData ();}); फ़ंक्शन augmentTableSortData () {console लॉग (क्षेत्र); console.log (scope.tableSortData); scope.tableSortData = []; console.log (scope.tableSortData);}}}}])
फ़ंक्शन augme NtTableSortData () {console.log (क्षेत्र); console.log (scope.tableSortData); Scope.tableSortData = []; console.log (scope.tableSortData); । गुंजाइश $ लागू (); // & lt; ------ यह कहा जाना चाहिए क्योंकि गुंजाइश डेटा को कोणीय के पाचन चक्र के बाहर क्लिक फ़ंक्शन में संशोधित किया जा रहा है। }
Comments
Post a Comment