Friday 15 April 2011

javascript - Using $scope functions from a different controller in AngularJS -


इस सवाल का पहले से ही एक उत्तर है: < / P>

  • 13 जवाब

    मैं साझा करना चाहता हूँ एक नियंत्रक के एक नियंत्रक के $ कार्यक्षेत्र के कार्य, एक AngularUI संवाद के लिए इस मामले में।

    विशेषकर नीचे दिए गए उदाहरण में, मैं $ scope.scopeVar को पॉपअप Ctrl में उपलब्ध होना चाहता हूं।

    मुख्य.जेएस

      कोणीय। मॉड्यूल ('MyApp', ['ui.bootstrap']); Var MainCtrl = ['$ scope', '$ संवाद', '$ रूटस्स्कोप', फ़ंक्शन ($ दायरा, $ संवाद, $ रूटस्स्कोप) {$ scope.myTestVar = "हैलो"; $ Scope.myOpts = {बैकड्रॉप: सच, कीबोर्ड: सच, बैकड्रॉप क्लिक करें: सही, हल करें: {MainCtrl: फ़ंक्शन () {वापसी MainCtrl; }}, TemplateUrl: 'myPopup.html', नियंत्रक: 'पॉपअप Ctrl'}; $ Scope.scopeVar = 'स्कोप var स्ट्रिंग जो कि index.html और myPopup.html दोनों में दिखना चाहिए।'; $ RootScope.rootScopeVar = "rootScope var स्ट्रिंग जो दोनों index.html और myPopup.html में दिखाई देगी।"; $ Scope.openDialog = फ़ंक्शन () {var d = $ dialog.dialog ($ scope.myOpts); D.open ()। फिर (फ़ंक्शन () {$ scope.scopeVar = 'स्कोप var स्ट्रिंग को पॉपअप को पहली बार बंद करने के बाद बदला जाना चाहिए।'; $ RootScope.rootScopeVar = 'rootScope var स्ट्रिंग को पॉपअप बंद करने के बाद बदला जाना चाहिए पहली बार।'; }); }; }]; Var पॉपअप Ctrl + ['$ दायरा', 'संवाद', 'माइक्रिया', फ़ंक्शन ($ दायरा, संवाद, मेनक्रूटल) {var कुंजी; के लिए (MainCtrl में कुंजी) {$ दायरे [कुंजी] = MainCtrl [कुंजी]; } $ Scope.close = फ़ंक्शन () {dialog.close (); }}];   

    index.html <प्री> & lt;! DOCTYPE html & gt; & Lt; html ng-app = "MyApp" & gt; & Lt; शीर्ष & gt; & Lt; स्क्रिप्ट डेटा -रूपी = "angular.js@1.1.5" डेटा-सेवर = "1.1.5" src = "http://code.angularjs.org/1.1.5/angular.min.js" & gt; & lt; / स्क्रिप्ट & gt; & Lt; स्क्रिप्ट डेटा -रूपी = "ui-bootstrap@0.3.0" डेटा-सेवर = "0.3.0" src = "http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.3। 0.min.js "& gt; & lt; / स्क्रिप्ट & gt; & Lt; script src = "script.js" & gt; & lt; / स्क्रिप्ट & gt; & Lt; लिंक डेटा -रूपी = "bootstrap-css @ *" डेटा-सेवर = "2.3.2" rel = "स्टाइलशीट" href = "// netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap -combined.min.css "/ & gt; & Lt; link rel = "स्टाइलशीट" href = "style.css" / & gt; & Lt; / head & gt; & Lt; body ng-controller = "MainCtrl" & gt; & LT; h4 & gt; {{scopeVar}} & lt; / h4 & gt; & LT; h4 & gt; {{rootScopeVar}} & lt; / h4 & gt; & Lt; br & gt; & Lt; बटन वर्ग = "बीटीएन बीटीएन-प्राथमिक" प्रकार = "बटन" डेटा-एनजी-क्लिक = "ओपनडीयलोग ()" & gt; पॉपअप & lt; / button & gt; & Lt; / body & gt; & Lt; / html & gt;

    myPopup.html <पूर्व> & lt; div class = "modal-body" & gt; & LT; h4 & gt; {{scopeVar}} & lt; / h4 & gt; & LT; h4 & gt; {{rootScopeVar}} & lt; / h4 & gt; & Lt; / div & gt; & Lt; div class = "modal-footer" & gt; & Lt; बटन डेटा-एनजी-क्लिक = "बंद ()" वर्ग = "बीटीएन बीटीएन-बड़े पॉपअप बड़ा" & gt; बंद करें & lt; / बटन & gt; & Lt; / div & gt;

    आपके पास दो विकल्प हैं:

    1. आपके पास स्कोप संपत्ति हो सकती है जो कि rootScope से जुड़ी सभी नियंत्रकों में उपलब्ध होनी चाहिए तो आपके मामले में, यह दिखेगा:
      $ rootScope.scopeVar = "डेटा जो सभी नियंत्रकों में उपलब्ध होगा"; हालांकि, इसका उपयोग करने की अनुशंसा नहीं की जाती है - पढ़ें

    2. किसी भी समय आपके पास कार्यक्षमता या डेटा होता है जिसे पुन: प्रयोग किया जाता है, तो आप सेवाओं से बेहतर होते हैं

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

No comments:

Post a Comment