मैं अपनी $scopeनियंत्रक को एक नियंत्रक से दूसरे उपयोग .$emitऔर .$onविधियों में कैसे भेज सकता हूं ?
function firstCtrl($scope) {
$scope.$emit('someEvent', [1,2,3]);
}
function secondCtrl($scope) {
$scope.$on('someEvent', function(mass) { console.log(mass); });
}यह मेरे सोचने के तरीके पर काम नहीं करता है। कैसे करते हैं $emitऔर $onकाम करते हैं?
जवाबों:
सबसे पहले, माता-पिता-बच्चे गुंजाइश संबंध मायने रखता है। आपके पास किसी घटना का अनुकरण करने की दो संभावनाएँ हैं:
$broadcast - घटना को सभी बाल scopes के लिए नीचे भेजता है,$emit - गुंजाइश पदानुक्रम के माध्यम से घटना को ऊपर की ओर भेजती है।मुझे आपके नियंत्रकों (स्कोप) संबंध के बारे में कुछ नहीं पता है, लेकिन कई विकल्प हैं:
यदि की गुंजाइश firstCtrlकी मूल है secondCtrlगुंजाइश, अपने कोड की जगह काम करना चाहिए $emitद्वारा $broadcastमें firstCtrl:
function firstCtrl($scope)
{
$scope.$broadcast('someEvent', [1,2,3]);
}
function secondCtrl($scope)
{
$scope.$on('someEvent', function(event, mass) { console.log(mass); });
}यदि आपके स्कॉप्स के बीच कोई पेरेंट-चाइल्ड रिलेशन नहीं है, तो आप $rootScopeकंट्रोलर में इंजेक्ट कर सकते हैं और ईवेंट को सभी चाइल्ड स्कॉप्स (यानी भी secondCtrl) में प्रसारित कर सकते हैं ।
function firstCtrl($rootScope)
{
$rootScope.$broadcast('someEvent', [1,2,3]);
}अंत में, जब आपको इवेंट को चाइल्ड कंट्रोलर से स्कैप्स तक भेजने की आवश्यकता होती है, तो आप इसका उपयोग कर सकते हैं $scope.$emit। यदि की गुंजाइश firstCtrlकी मूल है secondCtrlगुंजाइश:
function firstCtrl($scope)
{
$scope.$on('someEvent', function(event, data) { console.log(data); });
}
function secondCtrl($scope)
{
$scope.$emit('someEvent', [1,2,3]);
}$rootScopeअपनी सेवा में इंजेक्ट कर सकते हैं और सेवा से घटना को प्रसारित कर सकते हैं ।
$rootScope- लेकिन मैं जानना चाहती हूं कि अगर मैं किसी सेवा (ऑफ $rootScope) से किसी घटना का उत्सर्जन करता हूं , तो वह घटना अभी भी समाप्त हो जाएगी $rootScope; लेकिन, अगर $broadcastपदानुक्रम को तोड़ दिया जाए, और $emitउत्तर प्रदेश को नष्ट कर दिया जाए - तो क्या होता है BETWEEN "UP" और "DOWN" - चूंकि प्रसारक / एमिटर भी श्रोता (?) है। क्या होगा यदि मैं चाहता हूं कि घटना सभी "UPWARD" और सभी "DOWNWARD" स्कोप के लिए चुप हो, लेकिन डिस्पैचर के समान स्तर पर केवल 'श्रव्य' हो?
मैं इसके अलावा @zbynour द्वारा प्रस्तावित विकल्पों के लिए एक बेहतर विकल्प के रूप में 4 वें विकल्प का सुझाव दूंगा।
$rootScope.$emitइसके बजाय $rootScope.$broadcasttrasmitting और नियंत्रक प्राप्त करने के बीच संबंध की परवाह किए बिना उपयोग करें । इस तरह, यह कार्यक्रम सेट के भीतर ही रहता है, $rootScope.$$listenersजबकि $rootScope.$broadcastइस घटना के साथ सभी बच्चों को स्कोप के लिए प्रचारित किया जाता है, जिनमें से अधिकांश वैसे भी उस घटना के श्रोता नहीं होंगे। और निश्चित रूप से प्राप्त नियंत्रक के अंत में आप सिर्फ उपयोग करते हैं $rootScope.$on।
इस विकल्प के लिए आपको नियंत्रक के रूटस्कोप श्रोताओं को नष्ट करना याद रखना चाहिए:
var unbindEventHandler = $rootScope.$on('myEvent', myHandler);
$scope.$on('$destroy', function () {
unbindEventHandler();
});$rootScopeनियंत्रकों में इंजेक्शन की आवश्यकता होती है (जो सामान्य रूप से आवश्यक नहीं है)। लेकिन निश्चित रूप से एक और विकल्प, thx!
मैं अपने $ स्कोप ऑब्जेक्ट को एक कंट्रोलर से दूसरे का उपयोग करके कैसे भेज सकता हूं। $ emit और। विधियों पर $?
आप अपने एप्लिकेशन के पदानुक्रम में कोई भी वस्तु भेज सकते हैं, जिसमें $ गुंजाइश भी शामिल है ।
यहाँ एक त्वरित विचार है कि प्रसारण और उत्सर्जन कैसे काम करते हैं।
नीचे दिए गए नोड्स को नोटिस करें; नोड के भीतर सभी नेस्टेड 3. आप इस परिदृश्य के होने पर प्रसारण और उत्सर्जन का उपयोग करते हैं।
नोट: इस उदाहरण में प्रत्येक नोड की संख्या मनमाना है; यह आसानी से नंबर एक हो सकता है; नंबर दो; या यहां तक कि संख्या 1,348। प्रत्येक संख्या इस उदाहरण के लिए एक पहचानकर्ता है। इस उदाहरण का उद्देश्य कोणीय नियंत्रकों / निर्देशों का नेस्टिंग दिखाना है।
3
------------
| |
----- ------
1 | 2 |
--- --- --- ---
| | | | | | | |इस पेड़ को देखें। आप निम्नलिखित प्रश्नों के उत्तर कैसे देंगे?
नोट: इन सवालों के जवाब देने के अन्य तरीके हैं, लेकिन यहां हम प्रसारण और उत्सर्जन पर चर्चा करेंगे । इसके अलावा, जब पाठ पढ़ने से लगता है कि प्रत्येक संख्या में स्वयं की फ़ाइल (निर्देश, नियंत्रक) है, तो एक .js, दो.js, तीन.js।
नोड 1 नोड 3 से कैसे बोलता है ?
फ़ाइल one.js में
scope.$emit('messageOne', someValue(s));फ़ाइल में तीन.js - सभी बच्चों के लिए ऊपर के नोड को संवाद करने के लिए आवश्यक नोड्स।
scope.$on('messageOne', someValue(s));नोड 2 कैसे नोड 3 से बात करता है?
फाइल में दो.जे.
scope.$emit('messageTwo', someValue(s));फ़ाइल में तीन.js - सभी बच्चों के लिए ऊपर के नोड को संवाद करने के लिए आवश्यक नोड्स।
scope.$on('messageTwo', someValue(s));नोड 3 कैसे नोड 1 और / या नोड 2 से बात करता है?
फ़ाइल में तीन.js - सभी बच्चों के लिए ऊपर के नोड को संवाद करने के लिए आवश्यक नोड्स।
scope.$broadcast('messageThree', someValue(s));फ़ाइल में one.js && दो. js जो भी फ़ाइल आप संदेश या दोनों को पकड़ना चाहते हैं।
scope.$on('messageThree', someValue(s));कैसे नोड 2 नोड 1 से बात करता है?
फाइल में दो.जे.
scope.$emit('messageTwo', someValue(s));फ़ाइल में तीन.js - सभी बच्चों के लिए ऊपर के नोड को संवाद करने के लिए आवश्यक नोड्स।
scope.$on('messageTwo', function( event, data ){
scope.$broadcast( 'messageTwo', data );
});फ़ाइल one.js में
scope.$on('messageTwo', someValue(s));तथापि
जब आपके पास इन सभी नेस्टेड चाइल्ड नोड्स हैं जो इस तरह से संवाद करने की कोशिश कर रहे हैं, तो आप जल्दी से कई $ पर देखेंगे , $ ब्रॉडकास्ट और $ एमिट ।
यहाँ मुझे क्या करना पसंद है।
ऊपर के हिस्से में NODE ( इस मामले में 3 ...), जो आपके मूल नियंत्रक हो सकता है ...
तो, फ़ाइल में तीन.js
scope.$on('pushChangesToAllNodes', function( event, message ){
scope.$broadcast( message.name, message.data );
});अब बच्चे के किसी भी नोड में आपको केवल $ emit करने की जरूरत है या $ पर प्रयोग करके इसे पकड़ना चाहिए ।
नोट: यह आमतौर पर $ emit , $ प्रसारण , या $ का उपयोग किए बिना एक नेस्टेड पथ में बात को पार करने के लिए काफी आसान है , जिसका अर्थ है कि अधिकांश उपयोग के मामले हैं जब आप नोड 2 के साथ संवाद करने के लिए नोड 1 प्राप्त करने की कोशिश कर रहे हैं। या इसके विपरीत के ।
कैसे नोड 2 नोड 1 से बात करता है?
फाइल में दो.जे.
scope.$emit('pushChangesToAllNodes', sendNewChanges());
function sendNewChanges(){ // for some event.
return { name: 'talkToOne', data: [1,2,3] };
}फ़ाइल में तीन.js - सभी बच्चों के लिए ऊपर के नोड को संवाद करने के लिए आवश्यक नोड्स।
हम पहले से ही इस एक को याद किया?
फ़ाइल one.js में
scope.$on('talkToOne', function( event, arrayOfNumbers ){
arrayOfNumbers.forEach(function(number){
console.log(number);
});
});आपको अभी भी प्रत्येक विशिष्ट मूल्य के साथ $ का उपयोग करने की आवश्यकता होगी जिसे आप पकड़ना चाहते हैं, लेकिन अब आप किसी भी नोड्स में जो कुछ भी पसंद करते हैं, उसके बारे में चिंता किए बिना बना सकते हैं कि कैसे हम मूल नोड अंतराल पर संदेश प्राप्त करें कि हम कैसे पकड़ें और प्रसारित करें जेनेरिक धक्का ।
उम्मीद है की यह मदद करेगा...
The event life cycle starts at the scope on which $broadcast was called. All listeners listening for name event on this scope get notified. यदि आप $on('x', function(e, data) { $broadcast('x', data) })ctrl3 पर ctrl2 से बात करते हुए ctrl1 को लागू करते हैं तो आपको (मेरे जैसा) एक अनंत लूप मिलेगा। प्रसारण से पहले आपको इन पंक्तियों की आवश्यकता होगी; if (e.targetScope.$id === $scope.$id) { return; }
भेजने के लिए $scope objectएक से दूसरे नियंत्रक से, मैं बारे में चर्चा करेंगे $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जैसे ही $ स्कोप नष्ट हो जाते हैं।
$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 घटना को $ $SSope का उपयोग करके सुना जाना चाहिए। $, क्योंकि उत्सर्जित घटना कभी स्कोप ट्री के माध्यम से नीचे नहीं आती है। ।
इस मामले में भी आपको श्रोता को $ प्रसारण के मामले में नष्ट करना होगा।
संपादित करें:
मैं उपयोग नहीं
$rootScope.$broadcast + $scope.$onबल्कि उपयोग करना पसंद करता हूं$rootScope.$emit+ $rootScope.$on।$rootScope.$broadcast + $scope.$onकॉम्बो गंभीर प्रदर्शन समस्याएं पैदा कर सकता। ऐसा इसलिए है क्योंकि घटना सभी scopes के माध्यम से नीचे बुलबुला जाएगा।
2 संपादित करें :
इस उत्तर में संबोधित समस्या को angular.js संस्करण 1.2.7 में हल किया गया है। $ प्रसारण अब अपंजीकृत स्कोप पर बुदबुदाहट से बचा जाता है और $ एमिट के रूप में तेजी से चलता है।
एक ही ऐप में नियंत्रकों के बीच घटनाओं को भेजने और पकड़ने के लिए आपको $ rootScope का उपयोग करना होगा। अपने नियंत्रकों को $ 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); });
}
}$ स्कोप ऑब्जेक्ट में लिंक किए गए ईवेंट केवल स्वामी नियंत्रक में काम करते हैं। नियंत्रकों के बीच संचार $ rootScope या सेवाओं के माध्यम से किया जाता है।
आप अपने नियंत्रक से एक सेवा को कॉल कर सकते हैं जो एक वादा लौटाता है और फिर अपने नियंत्रक में इसका उपयोग करता है। और इसके उपयोग के बारे में $emitया $broadcastअन्य नियंत्रकों को सूचित करने के लिए आगे । मेरे मामले में, मुझे अपनी सेवा के माध्यम से 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>स्कोप (एस) का उपयोग स्कोप बच्चों या माता-पिता को फैलाने, घटना को फैलाने के लिए किया जा सकता है।
$ एमिट - घटना को माता-पिता तक पहुंचाता है। $ प्रसारण - बच्चों को घटना का प्रचार करता है। $ पर - घटनाओं को सुनने का तरीका, $ 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/
नीचे दिए गए कोड दो उप-नियंत्रक दिखाते हैं, जहां से घटनाओं को मूल नियंत्रक (rootScope) तक ऊपर भेजा जाता है
<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);
}
}कोणीयजल्स ईवेंट डॉक्स के अनुसार प्राप्त अंत में संरचना जैसे तर्क होने चाहिए
@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>
$rootScopeप्रसारण से बचने के लिए उपयोग न करें जब इसे टाला जा सकता है।