javascript - tutorial - $ সুযোগ দিয়ে কাজ করছে। $ Emit এবং $ scope। $




react js (9)

আমি কীভাবে আমার $ স্কোপ বস্তুটি এক নিয়ামক থেকে অন্যকে ব্যবহার করতে পাঠাতে পারি। $ Emit এবং $। পদ্ধতিতে?

$ সুযোগ সহ, আপনি আপনার অ্যাপ্লিকেশানের অনুক্রমের মধ্যে যে কোনও বস্তুটি পাঠাতে পারেন।

কিভাবে সম্প্রচার এবং কাজ নির্বাহ সম্পর্কে এখানে একটি দ্রুত ধারণা।

নীচের নোড লক্ষ্য করুন; সমস্ত নোডের মধ্যে nested 3. আপনি এই দৃশ্যকল্প আছে যখন আপনি সম্প্রচার এবং emit ব্যবহার করুন।

দ্রষ্টব্য: এই উদাহরণে প্রতিটি নোডের সংখ্যা নির্বিচারে; এটি সহজেই নম্বর এক হতে পারে; সংখ্যা দুই; অথবা এমনকি 1,348 সংখ্যা। প্রতিটি সংখ্যা শুধু এই উদাহরণের জন্য একটি সনাক্তকারী। এই উদাহরণটির বিন্দু Angular কন্ট্রোলার / নির্দেশনাগুলির নেস্টিং দেখানো।

                 3
           ------------
           |          |
         -----     ------
         1   |     2    |
      ---   ---   ---  ---
      | |   | |   | |  | |

এই গাছ পরীক্ষা করে দেখুন। আপনি কিভাবে নিম্নলিখিত প্রশ্নের উত্তর দিবেন?

দ্রষ্টব্য: এই প্রশ্নের উত্তর দেওয়ার অন্যান্য উপায় রয়েছে, তবে এখানে আমরা সম্প্রচার এবং নির্মাতা আলোচনা করব। এছাড়াও, যখন টেক্সটটি পড়ার সময় প্রতিটি নম্বরটিতে এটির নিজস্ব ফাইল (নির্দেশিকা, নিয়ামক) আছে, তখন এটি one.js, two.js, three.js।

কিভাবে নোড 1 নোড 3 কথা বলতে?

ফাইল এক.জেজে

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

ফাইল এক. js && two.js যে কোনও ফাইল আপনি বার্তা বা উভয়ই ধরতে চান।

scope.$on('messageThree', someValue(s));

কিভাবে নোড 2 নোড 1 কথা বলতে?

ফাইল দুই.জেজে

scope.$emit('messageTwo', someValue(s));

ফাইল তিন.জেজে - যোগাযোগের জন্য প্রয়োজনীয় সব শিশুদের নোডের সর্বাধিক নোড।

scope.$on('messageTwo', function( event, data ){
  scope.$broadcast( 'messageTwo', data );
});

ফাইল এক.জেজে

scope.$on('messageTwo', someValue(s));

যাহোক

যখন আপনি এই সমস্ত নেস্টেড শিশু নোডের মত যোগাযোগ করার চেষ্টা করছেন, তখন আপনি দ্রুত $ , সম্প্রচারের এবং $ emit এর অনেকগুলি ডলার দেখতে পাবেন।

এখানে আমি কি করতে চান।

সর্বাধিক পিতামাতা NODE (এই ক্ষেত্রে 3 ...), যা আপনার অভিভাবক নিয়ন্ত্রক হতে পারে ...

সুতরাং, ফাইল তিন.জেজে

scope.$on('pushChangesToAllNodes', function( event, message ){
  scope.$broadcast( message.name, message.data );
});

এখন কোনও শিশু নোডের মধ্যে আপনার কেবলমাত্র বার্তাটি সরাতে হবে বা $$ ব্যবহার করে এটি ধরতে হবে।

দ্রষ্টব্য: $ emit , $ সম্প্রচার , বা $$ ব্যবহার না করেই এটি একটি নিস্তেজপথের মধ্যে কথোপকথনটি ক্রস করা বেশ সহজ, যার অর্থ হল আপনি নোড 2 এর সাথে যোগাযোগ করতে যখন সবচেয়ে বেশি ব্যবহার করেন তখনই এটি নোড 2 পেতে পারে।

কিভাবে নোড 2 নোড 1 কথা বলতে?

ফাইল দুই.জেজে

scope.$emit('pushChangesToAllNodes', sendNewChanges());

function sendNewChanges(){ // for some event.
  return { name: 'talkToOne', data: [1,2,3] };
}

ফাইল তিন.জেজে - যোগাযোগের জন্য প্রয়োজনীয় সব শিশুদের নোডের সর্বাধিক নোড।

আমরা ইতিমধ্যে এই এক মনে রাখবেন?

ফাইল এক.জেজে

scope.$on('talkToOne', function( event, arrayOfNumbers ){
  arrayOfNumbers.forEach(function(number){
    console.log(number);
  });
});

আপনি যে প্রতিটি নির্দিষ্ট মানটি ধরতে চান তার সাথে আপনাকে এখনও $$ ব্যবহার করতে হবে, কিন্তু এখন আপনি কোনও নোডগুলিতে যা চান তা তৈরি করতে পারেন যা আমরা ধরতে এবং সম্প্রচার করার মতো পিতা-মাতা নোড ফাঁক জুড়ে বার্তাটি কীভাবে পেতে পারি সে সম্পর্কে চিন্তা না করেই তৈরি করতে পারি জেনেরিক pushChangesToAllNodes

আশাকরি এটা সাহায্য করবে...

আমি কীভাবে আমার $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 ?


Angularjs ঘটনা ডক্স অনুযায়ী প্রাপ্তির শেষ মত গঠন সঙ্গে আর্গুমেন্ট থাকা উচিত

@params

- {অবজেক্ট} ইভেন্ট ইভেন্টের তথ্য ইভেন্ট ধারণকারী তথ্য

- {অবজেক্ট} argle যা callee দ্বারা প্রেরিত হয় (নোট করুন যে এটি শুধুমাত্র অভিধান অবজেক্টে প্রেরণের জন্য এটিই একটি ভাল হতে পারে)

$scope.$on('fooEvent', function (event, args) { console.log(args) }); আপনার কোড থেকে

এছাড়াও যদি আপনি বিভিন্ন কন্ট্রোলারগুলির মধ্যে উপলব্ধ তথ্য ভাগ করে নেওয়ার চেষ্টা করছেন তবে এটি অর্জন করার আরেকটি উপায় রয়েছে এবং এটি কৌনিক পরিষেবা। যেহেতু পরিষেবাগুলির এককটি তথ্য সংরক্ষণ করা যেতে পারে এবং কন্ট্রোলার জুড়ে আনা যেতে পারে। কেবলমাত্র গেট্টার তৈরি করুন এবং সেটিতে সেটার ফাংশনগুলি, এই ফাংশনগুলি প্রকাশ করে, পরিষেবাতে গ্লোবাল ভেরিয়েবলগুলি তৈরি করে এবং তথ্য সঞ্চয় করতে তাদের ব্যবহার করে


আমি একটি বাহ্যিক ইভেন্ট এমিটার লাইব্রেরি যোগ হিসাবে একটি পরিষেবা হিসাবে প্রকল্প এবং আমি প্রয়োজন যেখানে এটি ইনজেকশন শেষ শেষ। তাই আমি সুযোগ উত্তরাধিকার জন্য যত্ন ছাড়া কোথাও "নির্গত" এবং "উপর" কিছু করতে পারেন। এটা এই ভাবে কম কষ্ট এবং অবশ্যই ভাল কর্মক্ষমতা। এছাড়াও আমার আরো পাঠযোগ্য।

ওয়াইল্ডকার্ড সমর্থন: EventEmitter2

ভালো কর্মক্ষমতা: eventemitter3

অন্যান্য বিকল্প: Drip


আমি প্রস্তাবিত বিকল্পগুলির একটি বিকল্প বিকল্প হিসেবে @ জেবনির দ্বারা 4 ষ্ঠ বিকল্পটি প্রস্তাব করব।

$rootScope.$emit ব্যবহার করুন। $rootScope.$emit পরিবর্তে $rootScope.$broadcast Trasmitting এবং কন্ট্রোলার গ্রহণের মধ্যে সম্পর্ক নির্বিশেষে $rootScope.$broadcast । এইভাবে, ইভেন্ট $rootScope.$$listeners এর সেটের মধ্যে থাকে $rootScope.$$listeners সাথে $rootScope.$broadcast সাথে $rootScope.$broadcast অনুষ্ঠান $rootScope.$broadcast সমস্ত শিশুদের স্কোপে প্রচার করে, যা বেশিরভাগ ক্ষেত্রেই সেই ঘটনাটির শ্রোতা হবে না। এবং অবশ্যই গ্রহণকারী নিয়ামক এর শেষে আপনি $rootScope.$on ব্যবহার $rootScope.$on$rootScope.$on

এই বিকল্পের জন্য আপনাকে অবশ্যই কন্ট্রোলারের rootScope শ্রোতাদের ধ্বংস করতে হবে মনে রাখবেন:

var unbindEventHandler = $rootScope.$on('myEvent', myHandler);
$scope.$on('$destroy', function () {
  unbindEventHandler();
});

একই অ্যাপে কন্ট্রোলারগুলির মধ্যে ইভেন্টগুলি প্রেরণ এবং ক্যাপচার করতে আপনাকে অবশ্যই $ 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 বা পরিষেবাদি মাধ্যমে সম্পন্ন করা হয়।


এটি আমার ফাংশন:

$rootScope.$emit('setTitle', newVal.full_name);

$rootScope.$on('setTitle', function(event, title) {
    if (scope.item) 
        scope.item.name = title;
    else 
        scope.item = {name: title};
});

প্রথমত, পিতামাতা-সন্তানের সুযোগ সম্পর্ক ব্যাপার। আপনি কিছু ইভেন্ট নির্গত দুটি সম্ভাবনা আছে:

  • $broadcast - সমস্ত শিশু স্কোপে ইভেন্টটি নীচে পাঠায়,
  • $emit - সুযোগ অনুক্রমের মাধ্যমে উপরের দিকে প্রেরণ করে।

আমি আপনার কন্ট্রোলার (scopes) সম্পর্ক সম্পর্কে কিছু জানি না, তবে বিভিন্ন বিকল্প রয়েছে:

  1. secondCtrl সুযোগ দ্বিতীয় secondCtrl স্কোপের পিতা-মাতা যদি আপনার কোডটি $emit firstCtrl দ্বারা $broadcast $emit প্রতিস্থাপনের মাধ্যমে প্রথম secondCtrlsecondCtrl হওয়া উচিত:

    function firstCtrl($scope)
    {
        $scope.$broadcast('someEvent', [1,2,3]);
    }
    
    function secondCtrl($scope)
    {
        $scope.$on('someEvent', function(event, mass) { console.log(mass); });
    }
  2. যদি আপনার স্কোপগুলির মধ্যে কোনো অভিভাবক-সন্তান সম্পর্ক না থাকে তবে আপনি $rootScope নিয়ন্ত্রককে ইনজেক্ট করতে পারেন এবং ইভেন্টটিকে সমস্ত সন্তানের স্কোপে (অর্থাৎ secondCtrl ) সম্প্রচার করতে পারেন।

    function firstCtrl($rootScope)
    {
        $rootScope.$broadcast('someEvent', [1,2,3]);
    }
  3. অবশেষে, যখন আপনি সন্তানের নিয়ন্ত্রক থেকে ইভেন্টটিকে পাঠানোর জন্য উপরের দিকে স্কোপ করতে চান তখন আপনি $scope.$emit ব্যবহার করতে পারেন $scope.$emitsecondCtrl সুযোগ দ্বিতীয় secondCtrl সুযোগের পিতা-মাতা যদি:

    function firstCtrl($scope)
    {
        $scope.$on('someEvent', function(event, data) { console.log(data); });
    }
    
    function secondCtrl($scope)
    {
        $scope.$emit('someEvent', [1,2,3]);
    }

সহজতম পথ :

এইচটিএমএল

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




angularjs