javascript - tutorial - $ स्कोप के साथ काम करना। $ Emit और $ scope। $ On
angularjs tutorial pdf (9)
मैं अपने $ स्कोप ऑब्जेक्ट को एक नियंत्रक से दूसरे में कैसे उपयोग कर सकता हूं। $ Emit और। तरीकों पर $?
आप किसी भी ऑब्जेक्ट को अपने ऐप के पदानुक्रम के भीतर भेज सकते हैं, जिसमें $ स्कोप भी शामिल है ।
यहां प्रसारण और उत्सर्जित करने के तरीके के बारे में एक त्वरित विचार है।
नीचे नोड्स पर ध्यान दें; सभी नोड 3 के भीतर घोंसला। जब आप इस परिदृश्य में प्रसारण और उत्सर्जित करते हैं तो आप इसका उपयोग करते हैं।
नोट: इस उदाहरण में प्रत्येक नोड की संख्या मनमाने ढंग से है; यह आसानी से नंबर एक हो सकता है; नंबर दो; या यहां तक कि संख्या 1,348। प्रत्येक उदाहरण इस उदाहरण के लिए सिर्फ एक पहचानकर्ता है। इस उदाहरण का बिंदु कोणीय नियंत्रकों / निर्देशों के घोंसले को दिखाना है।
3
------------
| |
----- ------
1 | 2 |
--- --- --- ---
| | | | | | | |
इस पेड़ को देखें। आप निम्नलिखित प्रश्नों का उत्तर कैसे देते हैं?
नोट: इन सवालों के जवाब देने के अन्य तरीके हैं, लेकिन यहां हम प्रसारण और उत्सव पर चर्चा करेंगे। साथ ही, जब पाठ नीचे पढ़ते हैं तो मान लें कि प्रत्येक नंबर की अपनी फ़ाइल (निर्देश, नियंत्रक) पूर्व one.js, two.js, three.js है।
नोड 1 कैसे नोड 3 से बात करता है?
फ़ाइल में एक .js
scope.$emit('messageOne', someValue(s));
फ़ाइल में तीन.जेएस - संवाद करने के लिए आवश्यक सभी बच्चों के नोड्स के लिए सबसे ऊपर नोड।
scope.$on('messageOne', someValue(s));
नोड 2 नोड 3 से कैसे बात करता है?
फाइल दो.जेएस में
scope.$emit('messageTwo', someValue(s));
फ़ाइल में तीन.जेएस - संवाद करने के लिए आवश्यक सभी बच्चों के नोड्स के लिए सबसे ऊपर नोड।
scope.$on('messageTwo', someValue(s));
नोड 3 कैसे नोड 1 और / या नोड 2 से बात करता है?
फ़ाइल में तीन.जेएस - संवाद करने के लिए आवश्यक सभी बच्चों के नोड्स के लिए सबसे ऊपर नोड।
scope.$broadcast('messageThree', someValue(s));
फ़ाइल one.js &&. js में जो भी फ़ाइल आप संदेश या दोनों को पकड़ना चाहते हैं।
scope.$on('messageThree', someValue(s));
नोड 2 नोड 1 से कैसे बात करता है?
फाइल दो.जेएस में
scope.$emit('messageTwo', someValue(s));
फ़ाइल में तीन.जेएस - संवाद करने के लिए आवश्यक सभी बच्चों के नोड्स के लिए सबसे ऊपर नोड।
scope.$on('messageTwo', function( event, data ){
scope.$broadcast( 'messageTwo', data );
});
फ़ाइल में एक .js
scope.$on('messageTwo', someValue(s));
तथापि
जब आपके पास इन सभी नेस्टेड बच्चे नोड्स इस तरह संवाद करने की कोशिश कर रहे हैं, तो आप जल्द ही $ , $ प्रसारण और $ emit के कई $ देखेंगे।
मैं यही करना चाहता हूं।
सबसे ऊपर माता-पिता NODE ( 3 इस मामले में ...) में, जो आपके मूल नियंत्रक हो सकता है ...
तो, फ़ाइल में तीन.जेएस
scope.$on('pushChangesToAllNodes', function( event, message ){
scope.$broadcast( message.name, message.data );
});
अब किसी भी बच्चे नोड्स में आपको केवल $ उत्सर्जित करने की आवश्यकता है या $ $ का उपयोग करके इसे पकड़ना होगा।
नोट: आमतौर पर $ emit , $ प्रसारण , या $ का उपयोग किए बिना एक नेस्टेड पथ में बातचीत को पार करना काफी आसान होता है, जिसका अर्थ यह है कि जब आप नोड 2 या इसके विपरीत संवाद करने के लिए नोड 1 प्राप्त करने का प्रयास कर रहे हैं तो अधिकांश उपयोग के मामले हैं।
नोड 2 नोड 1 से कैसे बात करता है?
फाइल दो.जेएस में
scope.$emit('pushChangesToAllNodes', sendNewChanges());
function sendNewChanges(){ // for some event.
return { name: 'talkToOne', data: [1,2,3] };
}
फ़ाइल में तीन.जेएस - संवाद करने के लिए आवश्यक सभी बच्चों के नोड्स के लिए सबसे ऊपर नोड।
हमने पहले ही इसे याद किया है?
फ़ाइल में एक .js
scope.$on('talkToOne', function( event, arrayOfNumbers ){
arrayOfNumbers.forEach(function(number){
console.log(number);
});
});
आपको अभी भी प्रत्येक विशिष्ट मूल्य के साथ $ का उपयोग करने की आवश्यकता होगी, जिसे आप पकड़ना चाहते हैं, लेकिन अब आप किसी नोड्स में जो भी चाहें उसे बना सकते हैं, इस बारे में चिंता किए बिना कि माता-पिता नोड अंतराल में संदेश कैसे प्राप्त करें, जैसे हम पकड़ते हैं और प्रसारित करते हैं जेनेरिक pushChangesToAllNodes ।
उम्मीद है की यह मदद करेगा...
मैं अपने $scope
ऑब्जेक्ट को एक नियंत्रक से दूसरे में कैसे उपयोग कर सकता हूं .$emit
और .$on
तरीकों .$on
?
function firstCtrl($scope) {
$scope.$emit('someEvent', [1,2,3]);
}
function secondCtrl($scope) {
$scope.$on('someEvent', function(mass) { console.log(mass); });
}
यह जिस तरह से मुझे लगता है कि यह काम नहीं करता है। $emit
और काम $on
$emit
कैसे करें?
Angularjs घटना दस्तावेज़ों के अनुसार प्राप्त करने वाले अंत में संरचना के साथ तर्क शामिल होना चाहिए
@params
- {ऑब्जेक्ट} घटना घटना पर जानकारी युक्त ईवेंट ऑब्जेक्ट है
- {ऑब्जेक्ट} तर्क है कि कैली द्वारा पारित किया गया है (ध्यान दें कि यह हमेशा एक शब्दकोश ऑब्जेक्ट में भेजने के लिए एक बेहतर हो सकता है)
$scope.$on('fooEvent', function (event, args) { console.log(args) });
आपके कोड से
इसके अलावा यदि आप अलग-अलग नियंत्रकों के बीच उपलब्ध जानकारी का एक साझा टुकड़ा प्राप्त करने का प्रयास कर रहे हैं, तो इसे हासिल करने का एक और तरीका है और यह कोणीय सेवाएं है। चूंकि सेवाओं को सिंगलटन की जानकारी संग्रहित की जा सकती है और नियंत्रकों में लाया जा सकता है। बस गेटर बनाएं और उस सेवा में सेटर फ़ंक्शंस, इन कार्यों का पर्दाफाश करें, सेवा में वैश्विक चर बनाएं और जानकारी संग्रहीत करने के लिए उनका उपयोग करें
आपको उसी ऐप में नियंत्रकों के बीच ईवेंट भेजने और कैप्चर करने के लिए $ 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); });
}
}
$ स्कोप ऑब्जेक्ट में जुड़ी घटनाएं केवल मालिक नियंत्रक में काम करती हैं। नियंत्रकों के बीच संचार $ रूटस्कोप या सेवाओं के माध्यम से किया जाता है।
एक नियंत्रक से दूसरे में $scope object
भेजने के लिए, मैं $rootScope.$broadcast
बारे में चर्चा $rootScope.$broadcast
और $rootScope.$emit
यहां जितना अधिक उपयोग किया जाता है।
प्रकरण 1 :
$ RootScope $ प्रसारण:। -
$rootScope.$broadcast('myEvent',$scope.data);//Here `myEvent` is event name
$rootScope.$on('myEvent', function(event, data) {} //listener on `myEvent` event
$rootScope
श्रोता स्वचालित रूप से नष्ट नहीं होते हैं। आपको $destroy
का उपयोग करके इसे नष्ट करने की जरूरत है। $scope.$on
का उपयोग करना बेहतर है $scope.$on
श्रोताओं को स्वचालित रूप से नष्ट कर दिया जाता है यानी जैसे ही $ स्कोप नष्ट हो जाता है।
$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 और $ प्रसारण में प्रमुख अंतर यह है कि $ rootScope। $ Emit ईवेंट $ rootScope का उपयोग करके सुनना चाहिए। $ पर, क्योंकि उत्सर्जित घटना कभी भी स्कोप पेड़ के माध्यम से नीचे नहीं आती है। ।
इस मामले में आपको $ प्रसारण के मामले में श्रोता को भी नष्ट करना होगा।
संपादित करें:
मैं
$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 जितनी तेजी से चलता है।
दायरे (ओं) का प्रचार प्रचार, बच्चों या माता-पिता के दायरे में फैलाने के लिए किया जा सकता है।
$ emit - घटना को माता-पिता को प्रचारित करता है। $ प्रसारण - बच्चों को घटना का प्रचार करता है। $ ऑन - घटनाओं को सुनने के लिए विधि, $ emit और $ प्रसारण द्वारा प्रचारित।
उदाहरण 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/
मैं अतिरिक्त रूप से @zbynour द्वारा प्रस्तावित विकल्पों के बेहतर विकल्प के रूप में चौथा विकल्प सुझाऊंगा।
$rootScope.$emit
उपयोग करें $rootScope.$emit
बजाय $rootScope.$broadcast
और नियंत्रक प्राप्त करने के बीच संबंधों के बावजूद $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();
});
यह मेरा कार्य है:
$rootScope.$emit('setTitle', newVal.full_name);
$rootScope.$on('setTitle', function(event, title) {
if (scope.item)
scope.item.name = title;
else
scope.item = {name: title};
});
सबसे आसान तरीका :
एचटीएमएल
<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>
<!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>