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

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>