AngularJS => आयोजन

पैरामीटर

पैरामीटर	मान प्रकार
प्रतिस्पर्धा	ऑब्जेक्ट {नाम: "ईवेंटनेम", टारगेटस्कोप: स्कोप, डिफॉल्टप्रेवेंटेड: गलत, करंटसैप: चाइल्डस्कोप}
आर्ग	डेटा जो घटना के निष्पादन के साथ पारित किया गया है

कोणीय घटना प्रणाली का उपयोग करना

$ गुंजाइश। $ फेंकना

$scope.$emit का उपयोग करना $scope.$emit गुंजाइश पदानुक्रम के माध्यम से ऊपर की ओर एक घटना का नाम आग देगा और $scope को सूचित करेगा। घटना जीवन चक्र उस दायरे पर शुरू होता है जिस पर $emit कहा जाता था।

काम करने वाले वायरफ्रेम:

$ गुंजाइश। $ प्रसारण

$scope.$broadcast का उपयोग करना $scope.$broadcast $scope नीचे एक घटना को आग लगा देगा। हम $scope.$on का उपयोग करके इन घटनाओं को सुन सकते हैं $scope.$on

काम करने वाले वायरफ्रेम:

वाक्य - विन्यास :

// firing an event upwards
$scope.$emit('myCustomEvent', 'Data to send');

// firing an event downwards
$scope.$broadcast('myCustomEvent', {
  someProp: 'some value'
});

// listen for the event in the relevant $scope
$scope.$on('myCustomEvent', function (event, data) {
  console.log(data); // 'Data from the event'
});

$scope बजाय आप $rootScope उपयोग कर सकते हैं, उस स्थिति में आपकी घटना सभी नियंत्रकों की परवाह किए बिना उस नियंत्रकों के दायरे में उपलब्ध होगी

AngularJS में स्वच्छ पंजीकृत घटना

पंजीकृत घटनाओं को साफ करने का कारण क्योंकि यहां तक कि नियंत्रक को नष्ट कर दिया गया है पंजीकृत घटना की हैंडलिंग अभी भी जीवित है। तो कोड निश्चित रूप से अप्रत्याशित रूप से चलेगा।

// firing an event upwards
$rootScope.$emit('myEvent', 'Data to send');

// listening an event
var listenerEventHandler = $rootScope.$on('myEvent', function(){
    //handle code
});

$scope.$on('$destroy', function() {
    listenerEventHandler();
});

उपयोग और महत्व

इन घटनाओं का उपयोग 2 या अधिक नियंत्रकों के बीच संवाद करने के लिए किया जा सकता है।

$emit एमिट एक घटना को स्कोप पदानुक्रम के माध्यम से ऊपर की ओर भेजती है, जबकि $broadcast एक घटना को सभी चाइल्ड स्कोप्स के नीचे भेजती है। इसे यहां खूबसूरती से समझाया गया है ।

नियंत्रकों के बीच संचार करते समय मूल रूप से दो प्रकार के परिदृश्य हो सकते हैं:

जब नियंत्रकों के पास अभिभावक-बाल संबंध होते हैं। (हम ऐसे परिदृश्यों में ज्यादातर $scope उपयोग कर सकते हैं)

जब नियंत्रक एक दूसरे से स्वतंत्र नहीं होते हैं और उन्हें एक दूसरे की गतिविधि के बारे में सूचित करने की आवश्यकता होती है। (हम ऐसे परिदृश्य में $rootScope उपयोग कर सकते हैं)

उदाहरण के लिए: किसी भी ई-कॉमर्स वेबसाइट के लिए, मान लें कि हमारे पास ProductListController (जो किसी उत्पाद ब्रांड पर क्लिक करने पर उत्पाद लिस्टिंग पृष्ठ को नियंत्रित करता है) और CartController (कार्ट आइटम प्रबंधित करने के लिए)। अब जब हम Add to Cart बटन पर क्लिक करते हैं, तो उसे CartController को भी सूचित करना CartController , ताकि वह वेबसाइट के नेविगेशन बार में नई कार्ट आइटम गणना / विवरण को प्रतिबिंबित कर सके। यह $rootScope का उपयोग करके प्राप्त किया जा सकता है।

$scope.$emit साथ $scope.$emit

<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.js"></script>
    <script>
        var app = angular.module('app', []);

        app.controller("FirstController", function ($scope) {
            $scope.$on('eventName', function (event, args) {
                $scope.message = args.message;
            });
        });

        app.controller("SecondController", function ($scope) {
            $scope.handleClick = function (msg) {
                $scope.$emit('eventName', {message: msg});
            };
        });

    </script>
  </head>
  <body ng-app="app">
    <div ng-controller="FirstController" style="border:2px ;padding:5px;">
        <h1>Parent Controller</h1>
        <p>Emit Message : {{message}}</p>
        <br />
        <div ng-controller="SecondController" style="border:2px;padding:5px;">
            <h1>Child Controller</h1>
            <input ng-model="msg">
            <button ng-click="handleClick(msg);">Emit</button>
        </div>
    </div>
  </body>
</html>

$scope.$broadcast साथ $scope.$broadcast :

<html>
  <head>
    <title>Broadcasting</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.js"></script>
    <script>
        var app = angular.module('app', []);

        app.controller("FirstController", function ($scope) {
            $scope.handleClick = function (msg) {
                $scope.$broadcast('eventName', {message: msg});
            };

        });

        app.controller("SecondController", function ($scope) {
            $scope.$on('eventName', function (event, args) {
                $scope.message = args.message;
            });
        });

    </script>
  </head>
  <body ng-app="app">
    <div ng-controller="FirstController" style="border:2px solid ; padding:5px;">
        <h1>Parent Controller</h1>
        <input ng-model="msg">
        <button ng-click="handleClick(msg);">Broadcast</button>
        <br /><br />
        <div ng-controller="SecondController" style="border:2px solid ;padding:5px;">
            <h1>Child Controller</h1>
            <p>Broadcast Message : {{message}}</p>
        </div>
    </div>
  </body>
</html>

हमेशा $ $ $ $ $ $ $ $ $ $ हमेशा के लिए श्रोताओं पर $

यदि आप किसी अन्य नियंत्रक पर जाते हैं तो $ rootScope। श्रोताओं पर $ स्मृति में रहेगा। यह स्मृति रिसाव पैदा करेगा यदि नियंत्रक दायरे से बाहर हो जाता है।

नहीं

angular.module('app').controller('badExampleController', badExample);

badExample.$inject = ['$scope', '$rootScope'];
function badExample($scope, $rootScope) {

    $rootScope.$on('post:created', function postCreated(event, data) {});

}

कर

angular.module('app').controller('goodExampleController', goodExample);

goodExample.$inject = ['$scope', '$rootScope'];
function goodExample($scope, $rootScope) {

    var deregister = $rootScope.$on('post:created', function postCreated(event, data) {});

    $scope.$on('$destroy', function destroyScope() {
        deregister();
    });

}

Modified text is an extract of the original Stack Overflow Documentation

के तहत लाइसेंस प्राप्त है CC BY-SA 3.0

से संबद्ध नहीं है Stack Overflow

AngularJS
आयोजन

खोज…