2013-06-11 12 views
27

में मॉड्यूल के बीच संचार मुझे लगता है कि एक शैलपृष्ठ के भीतर विभिन्न क्षेत्रों से जुड़े कई कोणीय-मॉड्यूल होना संभव है। लेकिन एक दूसरे के लिए AngularJS "बात" में मॉड्यूल कर सकते हैं? यदि हां, तो कैसे?AngularJS

उत्तर

25

विभिन्न तरीकों मॉड्यूल बातचीत या साझा कर सकते हैं जानकारी

  1. एक मॉड्यूल एक और मॉड्यूल में इंजेक्ट किया जा सकता है, जो मामले में कंटेनर मॉड्यूल इंजेक्शन मॉड्यूल के सभी तत्वों की पहुंच है कर रहे हैं। यदि आप angular seed प्रोजेक्ट देखते हैं, तो निर्देश

    angular.module ("myApp", ["myApp.filters", "myApp.services", "myApp.directices", "myApp.directives" जैसे कुछ मॉड्यूल बनाए जाते हैं। "," myApp.controllers "]) यह संचार तंत्र की बजाय पुन: प्रयोज्य तंत्र का अधिक है।

  2. दूसरा विकल्प है जैसा कि @Eduard द्वारा समझाया गया है सेवाओं का उपयोग करना होगा। चूंकि सेवाएं सिंगलटन हैं और किसी भी नियंत्रक में इंजेक्शन दी जा सकती है, इसलिए वे संचार तंत्र के रूप में कार्य कर सकते हैं।

  3. जैसा कि @Eduard ने फिर से तीसरा विकल्प इंगित किया है कि $ 3 स्कोप ऑब्जेक्ट का उपयोग करके पेरेंट कंट्रोलर का उपयोग करना है क्योंकि यह सभी बाल नियंत्रकों के लिए उपलब्ध है।

  4. आप $ रूट्सकोप को उन नियंत्रकों में इंजेक्ट भी कर सकते हैं जिन्हें $ प्रसारण और $ बस का उपयोग करने की आवश्यकता है, एक सेवा बस पैटर्न बनाने के लिए जहां नियंत्रक पब \ उप तंत्र का उपयोग कर बातचीत करते हैं।

मैं चौथे विकल्प की तरफ झुकता हूं। यहां कुछ और विवरण यहां देखें What's the correct way to communicate between controllers in AngularJS?

+1

मैं कर रहा हूँ चौथे विकल्प के साथ जाने जा रहा है। आपका बहुत बहुत धन्यवाद। –

+0

मैं थोड़ा उलझन में हूं (संख्या 4 पर अधिक विशिष्ट होने के लिए)। प्रलेखन में कहा गया है कि प्रत्येक ऐप का अपना '$ रूटस्कोप' होता है। जब आप कहते हैं कि '$ rootScope' को इंजेक्शन देने की आवश्यकता है, तो क्या आपका मतलब है कि' firstModule' से '$ rootScope' को' secondModule' के नियंत्रक में इंजेक्शन दिया जाना चाहिए? –

+2

ऐप मॉड्यूल नहीं है। आम तौर पर इसमें केवल एक ऐप होता है, जिसमें कई मॉड्यूल होते हैं। एक $ ऐप में मॉड्यूल में '$ जेलकोप 'साझा किया जाता है। – Chandermani

0

आप services और नियंत्रकों विरासत का उपयोग कर सकते किसी भी मामले में (यहाँ http://docs.angularjs.org/guide/dev_guide.mvc.understanding_controller समझाया गया है)

, आप अपने नियंत्रकों tighlty युग्मित नहीं होने पर विचार shuold।

+1

[कड़ी] (http://docs.angularjs.org/guide/dev_guide.mvc.understanding_controller) टूट गया है आप इसे ठीक कर सकते हैं –

3

मॉड्यूल के नियंत्रकों के बीच संवाद करने के लिए सेवा तंत्र का उपयोग करना।

(function() { 
     'use strict'; 

    //adding moduleB as dependency to moduleA 

    angular.module('Myapp.moduleA', ['Myapp.moduleB']) 
     .controller('FCtrl', FCtrl) 
     .service('sharedData', SharedData); 

    //adding the dependency shareData to FCtrl 

    FCtrl.$inject = ['sharedData']; 

    function FCtrl(sharedData) { 

     var vm = this; 
     vm.data = sharedData.data; 
    } 


    //shared data service 
    function SharedData() { 

     this.data = { 
     value: 'my shared data' 
     } 

    } 

    //second module 
    angular.module('Myapp.moduleB', []) 
     .controller('SCtrl', SCtrl); 

    SCtrl.$inject = ['sharedData']; 

    function SCtrl(sharedData) { 

     var vm = this; 
     vm.data = sharedData.data; 
    } 


    })(); 

और एचटीएमएल इस प्रकार है:

<html ng-app="firstModule"> 
<body> 

    <div ng-controller="FCtrl as xyz"> 
    <input type=text ng-model="xyz.data.value" /> 
    </div> 

    <div ng-controller="SCtrl as abc"> 
    <input type=text ng-model="abc.data.value" /> 
    </div> 

</body> 
</html>