दिलचस्प पोस्ट
प्रत्येक के लिए जावास्क्रिप्ट में एक सरणी पर? क्यों सी # में पूर्णांक विभाजन एक पूर्णांक देता है, लेकिन एक फ्लोट नहीं? बीएमपी में पिक्सेल के माध्यम से यात्रा करें क्या यह PHP में ओवरलोड ऑपरेटरों के लिए संभव है? ServiceRoute + WebServiceHostFactory WSDL पीढ़ी को मारता है? WSDL के साथ विस्तारहीन WCF सेवा कैसे बनाएं? मैं फ़ायरबग में सीएसएस परिवर्तन क्यों नहीं बचा सकता? 1 वर्ष की अवधि शून्य? सरल जावा HTTPS सर्वर jQuery वस्तु समानता एक निर्देशिका में फ़ाइलों के माध्यम से पावरशेल का उपयोग करके लूप डालने के बाद उत्पन्न आईडी प्राप्त करें Ajax में एसिंक्रोनस का क्या अर्थ है? सर्वर पर जाने के लिए jqGrid पुनः लोड कैसे करें? अजगर में एक बाहरी प्रोग्राम (निष्पादन योग्य) चल रहा है? मैं कैसे टेक्स्टबॉक्स की स्थिति प्राप्त कर सकता हूं जिसे दबाया गया है?

$ दायरे के साथ कार्य करना। $ Emit और $ scope। $ पर

मैं अपने $scope ऑब्जेक्ट को एक कंट्रोलर से दूसरी तक कैसे भेज सकता हूं .$emit और .$on .$emit .$on ?

 function firstCtrl($scope) { $scope.$emit('someEvent', [1,2,3]); } function secondCtrl($scope) { $scope.$on('someEvent', function(mass) { console.log(mass); }); } 

यह जिस तरह से मुझे लगता है कि यह होना चाहिए काम नहीं करता $on काम $on $emit और $on कैसे करते हैं?

Solutions Collecting From Web of "$ दायरे के साथ कार्य करना। $ Emit और $ scope। $ पर"

सबसे पहले, अभिभावक-बच्चे के क्षेत्र संबंध में कोई फर्क नहीं पड़ता। आपके पास कुछ घटनाओं का उत्सर्जन करने की दो संभावनाएं हैं:

  • $broadcast – घटना को नीचे सभी बच्चे स्कोप के लिए प्रेषित करता है,
  • $emit – गुंजाइश पदानुक्रम के माध्यम से घटना को ऊपर भेजता है

मैं अपने नियंत्रकों (स्कोप) संबंध के बारे में कुछ नहीं जानता, लेकिन कई विकल्प हैं:

  1. यदि secondCtrl दायरा दूसरा secondCtrl क्षेत्र का मूल है, तो आपके कोड को पहले $emit $broadcast $emit जगह लेना चाहिए। firstCtrl :

     function firstCtrl($scope) { $scope.$broadcast('someEvent', [1,2,3]); } function secondCtrl($scope) { $scope.$on('someEvent', function(event, mass) { console.log(mass); }); } 
  2. यदि आपके स्कॉप्स के बीच कोई माता-पिता संबंध नहीं है, तो आप $rootScope को नियंत्रक में इंजेक्ट कर सकते हैं और इस घटना को सभी बाल स्कोप (यानी secondCtrl ) में secondCtrl

     function firstCtrl($rootScope) { $rootScope.$broadcast('someEvent', [1,2,3]); } 
  3. अंत में, जब आपको बच्चे नियंत्रक से स्कोप को ऊपर की ओर भेजना होगा, तो आप $scope.$emit उपयोग कर सकते हैं $scope.$emit यदि secondCtrl दायरा दूसरा secondCtrl क्षेत्र का मूल है:

     function firstCtrl($scope) { $scope.$on('someEvent', function(event, data) { console.log(data); }); } function secondCtrl($scope) { $scope.$emit('someEvent', [1,2,3]); } 

मैं इसके अतिरिक्त @ ज़ब्यनर द्वारा प्रस्तावित विकल्पों के लिए एक बेहतर विकल्प के रूप में एक चौथा विकल्प सुझाता हूं।

$rootScope.$emit उपयोग करें। $rootScope.$emit की तुलना में $rootScope.$broadcast नियंत्रक प्राप्त करने और प्राप्त करने के बीच के रिश्ते की परवाह किए बिना। इस तरह, घटना $rootScope.$$listeners के सेट में ही $rootScope.$$listeners जबकि $rootScope.$broadcast साथ $rootScope.$broadcast सभी बच्चों के स्कॉप्स के लिए घटना के प्रसार को $rootScope.$broadcast करता है, जिनमें से ज्यादातर संभवत: उस घटना के श्रोता नहीं होंगे। और निश्चित तौर पर प्राप्त नियंत्रक के अंत में आप $rootScope.$on उपयोग $rootScope.$on

इस विकल्प के लिए आपको नियंत्रक के रूट स्कोप श्रोताओं को नष्ट करना याद रखना चाहिए:

 var unbindEventHandler = $rootScope.$on('myEvent', myHandler); $scope.$on('$destroy', function () { unbindEventHandler(); }); 

मैं अपने $ स्कोप ऑब्जेक्ट को एक कंट्रोलर से दूसरी तक कैसे भेज सकता हूं। $ Emit और। $ Methods पर?

आप अपने ऐप के पदानुक्रम के अंदर किसी ऑब्जेक्ट को भेज सकते हैं, जिसमें $ दायरा भी शामिल है

इस बारे में एक त्वरित विचार है कि कैसे प्रसारण और काम का उत्सर्जन करता है।

नीचे नोड्स पर ध्यान दें; नोड के अंदर सभी नेस्टेड 3. जब आप इस परिदृश्य को देखते हैं तो आप प्रसारण और उत्सर्जित करते हैं

नोट: इस उदाहरण में प्रत्येक नोड की संख्या मनमाना है; यह आसानी से नंबर एक हो सकता है; नंबर दो; या यहां तक ​​कि संख्या 1,348 प्रत्येक संख्या सिर्फ इस उदाहरण के लिए एक पहचानकर्ता है। इस उदाहरण के बिंदु को कोणीय नियंत्रकों / निर्देशों के घोंसले के शिकार दिखाने के लिए है।

  3 ------------ | | ----- ------ 1 | 2 | --- --- --- --- | | | | | | | | 

इस पेड़ को देखें आप निम्नलिखित सवालों के जवाब कैसे देते हैं?

नोट: इन सवालों के जवाब देने के अन्य तरीके हैं, लेकिन यहां हम प्रसारण पर चर्चा करेंगे और उत्सर्जन करेंगे । इसके अलावा, जब पाठ नीचे पढ़ते हैं तो प्रत्येक संख्या में इसे अपनी फ़ाइल है (निर्देश, नियंत्रक) पूर्व one.js, two.js, three.js

नोड कैसे 1 नोड से बात करता है?

फ़ाइल में one.js

 scope.$emit('messageOne', someValue(s)); 

फ़ाइल में तीन। जेएस – सभी बच्चों के नोड को सबसे ऊपर नोड करने की जरूरत है।

 scope.$on('messageOne', someValue(s)); 

नोड 2 कैसे नोड 3 से बात करता है?

फ़ाइल दो। जेएस में

 scope.$emit('messageTwo', someValue(s)); 

फ़ाइल में तीन। जेएस – सभी बच्चों के नोड को सबसे ऊपर नोड करने की जरूरत है।

 scope.$on('messageTwo', someValue(s)); 

नोड कैसे नोड 1 और / या नोड 2 से बात करता है?

फ़ाइल में तीन। जेएस – सभी बच्चों के नोड को सबसे ऊपर नोड करने की जरूरत है।

 scope.$broadcast('messageThree', someValue(s)); 

फ़ाइल में एक। जेएस और। दो। जेएस जो भी फ़ाइल आपको संदेश या दोनों को पकड़ना चाहते हैं

 scope.$on('messageThree', someValue(s)); 

कैसे नोड 2 नोड 1 से बात करता है?

फ़ाइल दो। जेएस में

 scope.$emit('messageTwo', someValue(s)); 

फ़ाइल में तीन। जेएस – सभी बच्चों के नोड को सबसे ऊपर नोड करने की जरूरत है।

 scope.$on('messageTwo', function( event, data ){ scope.$broadcast( 'messageTwo', data ); }); 

फ़ाइल में one.js

 scope.$on('messageTwo', someValue(s)); 

तथापि

जब आप इन नेस्टेड बाल नोड्स को इस तरह से संवाद करने की कोशिश कर रहे हैं, तो आप जल्दी से $ पर , $ प्रसारण का , और $ emit का देखेंगे

यहाँ मुझे क्या करना पसंद है

ऊपर के पैरेंट नोएड में ( 3 इस मामले में …), जो आपके पैरेंट नियंत्रक हो सकता है …

इसलिए, फ़ाइल में three.js

 scope.$on('pushChangesToAllNodes', function( event, message ){ scope.$broadcast( message.name, message.data ); }); 

अब किसी भी बच्चे के नोड्स में आपको केवल $ की ज़रूरत होती है, संदेश को फेंकना या इसे $ का उपयोग करके पकड़ना

नोट: सामान्य रूप से एक नीडिंत पथ में $ $ emit , $ broadcast , या $ का उपयोग किए बिना बात करना आसान है, जिसका अर्थ है कि जब आप नोड 1 को प्राप्त करने के लिए नोड 2 या इसके विपरीत के साथ संवाद करने की कोशिश कर रहे हैं,

कैसे नोड 2 नोड 1 से बात करता है?

फ़ाइल दो। जेएस में

 scope.$emit('pushChangesToAllNodes', sendNewChanges()); function sendNewChanges(){ // for some event. return { name: 'talkToOne', data: [1,2,3] }; } 

फ़ाइल में तीन। जेएस – सभी बच्चों के नोड को सबसे ऊपर नोड करने की जरूरत है।

हमने पहले से ही इसे याद किया है?

फ़ाइल में one.js

 scope.$on('talkToOne', function( event, arrayOfNumbers ){ arrayOfNumbers.forEach(function(number){ console.log(number); }); }); 

आपको अब भी प्रत्येक विशिष्ट मूल्य के साथ $ का उपयोग करने की आवश्यकता होगी जिसे आप पकड़ना चाहते हैं, लेकिन अब आप किसी भी नोड में जो चाहें बना सकते हैं बिना फ़ैसले नोड अंतर के संदेश को कैसे प्राप्त करें, जैसे कि हम पकड़ते हैं और प्रसारण करते हैं जेनेटिक पुश चेंजटोऑलनोड्स

उम्मीद है की यह मदद करेगा…

$ स्कोप ऑब्जेक्ट को एक नियंत्रक से दूसरे में भेजने के लिए, मैं $rootScope.$broadcast बारे में चर्चा $rootScope.$broadcast और $rootScope.$emit

मामला 1 :

$ RootScope $ प्रसारण:। –

 $rootScope.$broadcast('myEvent',$scope.data); $rootScope.$on('myEvent', function(event, data) {} 

$rootScope श्रोता स्वचालित रूप से नष्ट नहीं होते हैं $destroy करने के लिए आपको इसे नष्ट करना होगा $scope.$on का उपयोग करना बेहतर है $scope.$on रूप में $scope पर श्रोताओं को स्वचालित रूप से नष्ट कर दिया जाता है जैसे कि $ का दायरा नष्ट हो जाता है

 $scope.$on('myEvent', function(event, data) {} 

या,

  var customeEventListener = $rootScope.$on('myEvent', function(event, data) { } $scope.$on('$destroy', function() { customeEventListener(); }); 

केस 2:

। $ RootScope $ फेंकना:

  $rootScope.$emit('myEvent',$scope.data); $rootScope.$on('myEvent', function(event, data) {}//$scope.$on not works 

$ Emit और $ broadcast में प्रमुख अंतर यह है कि $ रूट स्कोप। $ Emit इवेंट को $ रूट स्कोप। $ का उपयोग करके सुनना चाहिए, क्योंकि उत्सर्जित घटना स्कोप ट्री के माध्यम से कभी नहीं आती है
इस मामले में आपको श्रोता को नष्ट करना होगा जैसे कि $ प्रसारण के मामले में।

संपादित करें:

मैं $rootScope.$broadcast + $scope.$on का उपयोग नहीं करना $rootScope.$broadcast + $scope.$on लेकिन $rootScope.$emit+ $rootScope.$on उपयोग करें $rootScope.$emit+ $rootScope.$on $rootScope.$broadcast + $scope.$on कॉम्बो $rootScope.$broadcast + $scope.$on गंभीर प्रदर्शन समस्याएं पैदा कर सकता है इसका कारण यह है कि यह घटना सभी स्कोप के माध्यम से बुलबुलेगी।

2 संपादित करें :

इस उत्तर में संबोधित मुद्दा angular.js संस्करण 1.2.7 में हल किया गया है। $ प्रसारित अब अपंजीकृत स्कोप पर बुदबुदाहट से बचा जाता है और जितना तेज़ी से $ emit चलाता है

आपको एक ही ऐप में नियंत्रकों के बीच की घटनाओं को भेजने और कैप्चर करने के लिए $ rootScope का उपयोग करना चाहिए। अपने नियंत्रकों के लिए $ रूटक्षेत्र निर्भरता इंजेक्षन करें यहाँ एक काम उदाहरण है

 app.controller('firstCtrl', function($scope, $rootScope) { function firstCtrl($scope) { { $rootScope.$emit('someEvent', [1,2,3]); } } app.controller('secondCtrl', function($scope, $rootScope) { function secondCtrl($scope) { $rootScope.$on('someEvent', function(event, data) { console.log(data); }); } } 

$ स्कोप ऑब्जेक्ट में जुड़े ईवेंट केवल स्वामी नियंत्रक में काम करते हैं नियंत्रकों के बीच संचार रूट के माध्यम से किया जाता हैस्कोप या सेवाओं।

आप अपने नियंत्रक से एक सेवा कॉल कर सकते हैं जो वादा करता है और फिर अपने नियंत्रक में इसका उपयोग करता है। और इसके बारे में अन्य नियंत्रकों को सूचित करने के लिए $ emit या $ प्रसारण का उपयोग करें। मेरे मामले में, मुझे अपनी सेवा के जरिए http कॉल करना पड़ा, इसलिए मैंने ऐसा कुछ किया:

 function ParentController($scope, testService) { testService.getList() .then(function(data){ $scope.list = testService.list; }) .finally(function(){ $scope.$emit('listFetched'); }) function ChildController($scope, testService){ $scope.$on('listFetched', function(event, data) { // use the data accordingly }) } 

और मेरी सेवा इस तरह दिखती है

 app.service('testService',['$http', function($http){ this.list = []; this.getList = function () { return $http.get(someUrl) .then(function (response) { if (typeof response.data === 'object') { list = response.data.results; return response.data; } else { // invalid response return $q.reject(response.data); } }, function (response) { // something went wrong return $q.reject(response.data); }); } }]) 

यह मेरा कार्य है:

 $rootScope.$emit('setTitle', newVal.full_name); $rootScope.$on('setTitle', function(event, title) { if (scope.item) scope.item.name = title; else scope.item = {name: title}; }); 
 <!DOCTYPE html> <html> <head> <script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script> <script> var app = angular.module('MyApp',[]); app.controller('parentCtrl',function($scope){ $scope.$on('MyEvent',function(event,data){ $scope.myData = data; }); }); app.controller('childCtrl',function($scope){ $scope.fireEvent = function(){ $scope.$emit('MyEvent','Any Data'); } }); </script> </head> <body ng-app="MyApp"> <div ng-controller="parentCtrl" ng-model="myName"> {{myData}} <div ng-controller="childCtrl"> <button ng-click="fireEvent()">Fire Event</button> </div> </div> </body> </html> 

नीचे कोड दो उप-नियंत्रक दिखाता है जहां से इवेंट को पेरेंट कंट्रोलर (रूट स्स्कोप) के ऊपर भेज दिया जाता है

 <body ng-app="App"> <div ng-controller="parentCtrl"> <p>City : {{city}} </p> <p> Address : {{address}} </p> <div ng-controller="subCtrlOne"> <input type="text" ng-model="city"/> <button ng-click="getCity(city)">City !!!</button> </div> <div ng-controller="subCtrlTwo"> <input type="text" ng-model="address"/> <button ng-click="getAddrress(address)">Address !!!</button> </div> </div> </body> 

  var App = angular.module('App',[]); //parent controller App.controller('parentCtrl',parentCtrl); parentCtrl.$inject = ["$scope"]; function parentCtrl($scope) { $scope.$on('cityBoom',function(events,data){ $scope.city = data; }); $scope.$on('addrBoom',function(events,data){ $scope.address = data; }); } //sub controller one App.controller('subCtrlOne',subCtrlOne); subCtrlOne.$inject =['$scope']; function subCtrlOne($scope) { $scope.getCity=function(city){ $scope.$emit('cityBoom',city); } } //sub controller two App.controller('subCtrlTwo',subCtrlTwo); subCtrlTwo.$inject = ["$scope"]; function subCtrlTwo($scope) { $scope.getAddrress = function(addr) { $scope.$emit('addrBoom',addr); } } 

http://jsfiddle.net/shushanthp/zp6v0rut/

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

वाइल्डकार्ड समर्थन: ईवेंट एमीटर 2

अच्छा प्रदर्शन: eventemitter3

अन्य वैकल्पिक: ड्रिप

गुंजाइश बच्चों या माता-पिता के लिए घटना को प्रेषित करने के लिए उपयोग किया जा सकता है।

$ emit – माता पिता के लिए घटना का प्रचार। $ प्रसारित – बच्चों को इस घटना का प्रचार करता है $ ऑन – विधि घटनाओं को सुनने के लिए, $ emit और $ broadcast द्वारा प्रचारित

उदाहरण index.html :

 <div ng-app="appExample" ng-controller="EventCtrl"> Root(Parent) scope count: {{count}} <div> <button ng-click="$emit('MyEvent')">$emit('MyEvent')</button> <button ng-click="$broadcast('MyEvent')">$broadcast('MyEvent')</button><br> Childrent scope count: {{count}} </div> </div> 

उदाहरण app.js :

 angular.module('appExample', []) .controller('EventCtrl', ['$scope', function($scope) { $scope.count = 0; $scope.$on('MyEvent', function() { $scope.count++; }); }]); 

यहां आप कोड का परीक्षण कर सकते हैं: http://jsfiddle.net/zp6v0rut/41/

कोणीय घटना के अनुसार दस्तावेज़ प्राप्त अंत में एक ढांचे की तरह तर्क के साथ होना चाहिए

@params

– {ऑब्जेक्ट} ईवेंट घटना पर जानकारी युक्त ईवेंट ऑब्जेक्ट है

– (ऑब्जेक्ट) एल्ग्स जो कैली द्वारा पारित किए जाते हैं (ध्यान दें कि यह केवल एक शब्दकोश वस्तु को हमेशा भेजने के लिए बेहतर होगा)

$scope.$on('fooEvent', function (event, args) { console.log(args) }); आपके कोड से

इसके अलावा, अगर आप अलग-अलग नियंत्रकों में उपलब्ध सूचनाओं का एक साझा टुकड़ा प्राप्त करने की कोशिश कर रहे हैं, तो इसे हासिल करने का एक और तरीका है और यह कोणीय सेवाएं है। चूंकि सेवाओं में सिंगलटन सूचनाएं संग्रहित की जा सकती हैं और नियंत्रकों में लाई जा सकती हैं। बस बनाने वाला और उस सेवा में सेटर फ़ंक्शंस, इन फ़ंक्शंस का पर्दाफाश करें, सेवा में वैश्विक वैरिएबल करें और जानकारी को स्टोर करने के लिए उनका इस्तेमाल करें

सबसे आसान तरीका :

एचटीएमएल

  <div ng-app="myApp" ng-controller="myCtrl"> <button ng-click="sendData();"> Send Data </button> </div> 

जावास्क्रिप्ट

  <script> var app = angular.module('myApp', []); app.controller('myCtrl', function($scope, $rootScope) { function sendData($scope) { var arrayData = ['sam','rumona','cubby']; $rootScope.$emit('someEvent', arrayData); } }); app.controller('yourCtrl', function($scope, $rootScope) { $rootScope.$on('someEvent', function(event, data) { console.log(data); }); }); </script>