यदि आप एक नियंत्रक को दूसरे में बुलाना चाहते हैं तो चार विधियाँ उपलब्ध हैं
- $ rootScope। $ emit () और $ rootScope। $ प्रसारण ()
- यदि दूसरा नियंत्रक बच्चा है, तो आप पेरेंट चाइल्ड कम्युनिकेशन का उपयोग कर सकते हैं।
- सेवाओं का उपयोग करें
- हैक की तरह - angular.element () की मदद से
1. $ rootScope। $ Emit () और $ rootScope। $ प्रसारण ()
नियंत्रक और इसका दायरा नष्ट हो सकता है, लेकिन $ rootScope आवेदन भर में बना हुआ है, इसीलिए हम $ rootScope ले रहे हैं क्योंकि $ rootScope सभी स्कोपों का जनक है।
यदि आप माता-पिता से बच्चे तक संचार कर रहे हैं और यहां तक कि बच्चा अपने भाई-बहनों के साथ संवाद करना चाहता है, तो आप $ प्रसारण का उपयोग कर सकते हैं
यदि आप बच्चे से माता-पिता तक संचार कर रहे हैं, तो किसी भाई-बहन का चालान नहीं हुआ है तो आप $ rootScope का उपयोग कर सकते हैं। $ em।
एचटीएमएल
<body ng-app="myApp">
<div ng-controller="ParentCtrl" class="ng-scope">
// ParentCtrl
<div ng-controller="Sibling1" class="ng-scope">
// Sibling first controller
</div>
<div ng-controller="Sibling2" class="ng-scope">
// Sibling Second controller
<div ng-controller="Child" class="ng-scope">
// Child controller
</div>
</div>
</div>
</body>
कोणीयज कोड
var app = angular.module('myApp',[]);//We will use it throughout the example
app.controller('Child', function($rootScope) {
$rootScope.$emit('childEmit', 'Child calling parent');
$rootScope.$broadcast('siblingAndParent');
});
app.controller('Sibling1', function($rootScope) {
$rootScope.$on('childEmit', function(event, data) {
console.log(data + ' Inside Sibling one');
});
$rootScope.$on('siblingAndParent', function(event, data) {
console.log('broadcast from child in parent');
});
});
app.controller('Sibling2', function($rootScope) {
$rootScope.$on('childEmit', function(event, data) {
console.log(data + ' Inside Sibling two');
});
$rootScope.$on('siblingAndParent', function(event, data) {
console.log('broadcast from child in parent');
});
});
app.controller('ParentCtrl', function($rootScope) {
$rootScope.$on('childEmit', function(event, data) {
console.log(data + ' Inside parent controller');
});
$rootScope.$on('siblingAndParent', function(event, data) {
console.log('broadcast from child in parent');
});
});
$ Emit के उपरोक्त कोड कंसोल में 'चाइल्ड इमिट' बाल भाई-बहनों के अंदर कॉल नहीं करेगा और यह केवल माता-पिता के अंदर कॉल करेगा, जहाँ $ प्रसारण को भाई-बहन और माता-पिता के अंदर भी कहा जाता है। यह वह स्थान है जहाँ प्रदर्शन एक क्रिया में आते हैं। $ emit। बेहतर, अगर आप बच्चे को माता-पिता के संचार के लिए उपयोग कर रहे हैं क्योंकि यह कुछ गंदे चेक को छोड़ देता है।
2. यदि दूसरा नियंत्रक बच्चा है, तो आप बाल अभिभावक संचार का उपयोग कर सकते हैं
इसकी एक सबसे अच्छी विधि, यदि आप बाल अभिभावक संचार करना चाहते हैं, जहाँ बच्चा तत्काल माता-पिता के साथ संवाद करना चाहता है - तो उसे किसी भी प्रकार के $ प्रसारण या $ emit की आवश्यकता नहीं होगी, लेकिन यदि आप माता-पिता से बच्चे तक संचार करना चाहते हैं तो आपको सेवा या $ प्रसारण का उपयोग करें
उदाहरण के लिए HTML: -
<div ng-controller="ParentCtrl">
<div ng-controller="ChildCtrl">
</div>
</div>
AngularJS
app.controller('ParentCtrl', function($scope) {
$scope.value='Its parent';
});
app.controller('ChildCtrl', function($scope) {
console.log($scope.value);
});
जब भी आप माता-पिता के संचार के लिए बच्चे का उपयोग कर रहे हैं, तो एंगुलरज बच्चे के अंदर एक चर की खोज करेंगे, अगर यह अंदर मौजूद नहीं है तो यह माता-पिता के नियंत्रक के अंदर के मूल्यों को देखना पसंद करेगा।
3. सेवाओं का उपयोग करें
एंगुलरजेएस सेवाओं की वास्तुकला का उपयोग करके "सेपरेशन ऑफ कंसर्न" की अवधारणाओं का समर्थन करता है । सेवाएं जावास्क्रिप्ट फ़ंक्शंस हैं और केवल एक विशिष्ट कार्य करने के लिए ज़िम्मेदार हैं। यह उन्हें एक व्यक्तिगत इकाई बनाता है जो बनाए रखने योग्य और परीक्षण करने योग्य है । एंगुलरज की डिपेंडेंसी इंजेक्शन mecahnism का उपयोग करके इंजेक्शन लगाने के लिए उपयोग की जाने वाली सेवाएं।
कोणीयज कोड:
app.service('communicate',function(){
this.communicateValue='Hello';
});
app.controller('ParentCtrl',function(communicate){//Dependency Injection
console.log(communicate.communicateValue+" Parent World");
});
app.controller('ChildCtrl',function(communicate){//Dependency Injection
console.log(communicate.communicateValue+" Child World");
});
यह आउटपुट हैलो चाइल्ड वर्ल्ड और हैलो पैरेंट वर्ल्ड देगा। सेवाओं के एंगुलर डॉक्स के अनुसार सिंगलनेट्स - सेवा पर निर्भर प्रत्येक घटक को सेवा कारखाने द्वारा उत्पन्न एकल उदाहरण का संदर्भ मिलता है ।
4. हैक की - angular.element () की मदद से
इस विधि को इसके Id / unique class.angular.element () विधि रिटर्न एलिमेंट द्वारा स्कोप () मिल जाता है और स्कोप और स्कोप) एक स्कोप के दूसरे स्कोप वैरिएबल का उपयोग करके दूसरे वैरिएबल का $ स्कोप वैरिएबल देता है, यह एक अच्छा प्रैक्टिस नहीं है।
एचटीएमएल: -
<div id='parent' ng-controller='ParentCtrl'>{{varParent}}
<span ng-click='getValueFromChild()'>Click to get ValueFormChild</span>
<div id='child' ng-controller='childCtrl'>{{varChild}}
<span ng-click='getValueFromParent()'>Click to get ValueFormParent </span>
</div>
</div>
AngularJS: -
app.controller('ParentCtrl',function($scope){
$scope.varParent="Hello Parent";
$scope.getValueFromChild=function(){
var childScope=angular.element('#child').scope();
console.log(childScope.varChild);
}
});
app.controller('ChildCtrl',function($scope){
$scope.varChild="Hello Child";
$scope.getValueFromParent=function(){
var parentScope=angular.element('#parent').scope();
console.log(parentScope.varParent);
}
});
ऊपर के कोड में नियंत्रक एचटीएमएल पर अपना मान दिखा रहे हैं और जब आप पाठ पर क्लिक करेंगे, तो आपको कंसोल में मान उसी हिसाब से मिलेंगे। यदि आप अभिभावक नियंत्रकों की अवधि पर क्लिक करते हैं, तो ब्राउज़र बच्चे और उपाध्यक्ष के मूल्य को सांत्वना देगा।