javascript tutorial $ स्कोप के साथ काम करना। $ Emit और $ scope। $ On




angularjs tutorial pdf (11)

आपको उसी ऐप में नियंत्रकों के बीच ईवेंट भेजने और कैप्चर करने के लिए $ 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 ऑब्जेक्ट को एक नियंत्रक से दूसरे में कैसे उपयोग कर सकता हूं .$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 कैसे करें?

मैं अपने $ स्कोप ऑब्जेक्ट को एक नियंत्रक से दूसरे में कैसे उपयोग कर सकता हूं। $ 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 ।

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

मैं अतिरिक्त रूप से @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();
});

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

एचटीएमएल 

  <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>

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

वाइल्डकार्ड समर्थन: EventEmitter2

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

अन्य विकल्प: Drip

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

<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/

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

$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>

एक नियंत्रक से दूसरे में $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 जितनी तेजी से चलता है।

सबसे पहले, माता-पिता-बच्चे का दायरा संबंध मायने रखता है। कुछ घटनाओं को छोड़ने के लिए आपके पास दो संभावनाएं हैं:

  • $broadcast - घटना को सभी बच्चे के दायरे में नीचे भेजता है,
  • $emit - स्कोप पदानुक्रम के माध्यम से घटना को ऊपर भेजता है।

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

  1. यदि firstCtrl का दायरा firstCtrl स्कोप का firstCtrl है, तो आपके कोड को $emit को $broadcast द्वारा पहले स्थानांतरित करके काम करना चाहिए: 

    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 स्कोप का secondCtrl है: 

    function firstCtrl($scope)
{
    $scope.$on('someEvent', function(event, data) { console.log(data); });
}

function secondCtrl($scope)
{
    $scope.$emit('someEvent', [1,2,3]);
}

Angularjs घटना दस्तावेज़ों के अनुसार प्राप्त करने वाले अंत में संरचना के साथ तर्क शामिल होना चाहिए

@params

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

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

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

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






tutorial   javascript   angularjs  

angularjs