$ চালু এবং ang কৌণিক মধ্যে সম্প্রচার

Question

আমার কাছে বিভিন্ন দৃশ্য সহ একটি পাদলেখ নিয়ন্ত্রণকারী এবং কোডস্ক্যানারকন্ট্রোলার রয়েছে।

angular.module('myApp').controller('footerController', ["$scope", function($scope) {}]);

angular.module('myApp').controller('codeScannerController', ["$scope", function($scope) {
console.log("start");
$scope.startScanner = function(){...

আমি যখন <li>ফুটারে html এ ক্লিক করি তখন আমার এই কোডটি কোডস্ক্যানারকন্ট্রোলারে পাওয়া উচিত।

<li class="button" ng-click="startScanner()">3</li>

আমি মনে করি এটি দিয়ে $onএবং এটি উপলব্ধি করা যায় $broadcastতবে আমি জানি না কীভাবে এবং কোথাও উদাহরণ পাওয়া যায় না।

Answer 1

আপনি যদি এটি $broadcastব্যবহার করতে চান $rootScope:

$scope.startScanner = function() {

    $rootScope.$broadcast('scanner-started');
}

এবং তারপরে, পেতে $scopeআপনার নিয়ামকের ব্যবহার করুন :

$scope.$on('scanner-started', function(event, args) {

    // do what you want to do
});

আপনি চাইলে আপনি যখন তর্ক করতে পারেন $broadcast:

$rootScope.$broadcast('scanner-started', { any: {} });

এবং তারপরে সেগুলি গ্রহণ করুন:

$scope.$on('scanner-started', function(event, args) {

    var anyThing = args.any;
    // do what you want to do
});

স্কোপ ডক্সের মধ্যে এর জন্য ডকুমেন্টেশন ।

Comments

আপনি নিজের পছন্দ মতো ইভেন্টটির নাম রাখতে পারেন।

— ডেভিন ট্রায়ান

নিশ্চিত হয়ে নিন যে আপনি $ সুযোগ। $ প্রয়োগ (); আপনার পরিবর্তন!

— ইসমাইল

@ ইসমাইল কেন ... এবং কোথায়?

— জানস

এই স্ট্রিংগুলি সম্প্রচারিত বার্তাটিকে হার্ডকড করার পরিবর্তে কোথাও সংরক্ষণ করার জন্য কোনও প্রস্তাবিত অনুশীলন রয়েছে?

— rperryng

$scope.$apply()কৌনিক কাঠামোর বাইরে মডেল পরিবর্তন করার সময় @ ইসমাইলটি কেবল তখনই প্রয়োজনীয় হয় (যেমন একটি সেটটাইমআউট, একটি ডায়ালগ কলব্যাক, বা একটি এজ্যাক্স কলব্যাক), অন্য কথায় $apply()সমস্ত কোড .$on()শেষ হওয়ার পরে ইতিমধ্যে ট্রিগার করা হয়।

— th3uiguy

Answer 2

প্রথমত, একটি সংক্ষিপ্ত বিবরণ $on(), $broadcast()এবং$emit() :

• .$on(name, listener) - প্রদত্ত দ্বারা নির্দিষ্ট ইভেন্টের জন্য তালিকাভুক্ত করুন name
• .$broadcast(name, args)- $scopeসমস্ত বাচ্চাদের মাধ্যমে একটি ইভেন্ট সম্প্রচার করুন
• .$emit(name, args)- $scopeসমস্ত পিতামাতাসহ, সহ সকলের কাছে ক্রমবর্ধমান একটি ইভেন্ট প্রেরণ করুন$rootScope

নিম্নলিখিত HTML এর উপর ভিত্তি করে ( এখানে সম্পূর্ণ উদাহরণ দেখুন ):

<div ng-controller="Controller1">
    <button ng-click="broadcast()">Broadcast 1</button>
    <button ng-click="emit()">Emit 1</button>
</div>

<div ng-controller="Controller2">
    <button ng-click="broadcast()">Broadcast 2</button>
    <button ng-click="emit()">Emit 2</button>
    <div ng-controller="Controller3">
        <button ng-click="broadcast()">Broadcast 3</button>
        <button ng-click="emit()">Emit 3</button>
        <br>
        <button ng-click="broadcastRoot()">Broadcast Root</button>
        <button ng-click="emitRoot()">Emit Root</button>
    </div>
</div>

বরখাস্ত করা ইভেন্টগুলি $scopesনিম্নলিখিতভাবে অতিক্রম করবে :

• সম্প্রচার 1 - শুধুমাত্র কন্ট্রোলার 1 দ্বারা দেখা যাবে $scope
• এমিট 1 - $scopeতখন কন্ট্রোলার 1 দ্বারা দেখা হবে$rootScope
• সম্প্রচার 2 - কন্ট্রোলার 2 $scopeতারপরে নিয়ামক 3 দেখাবে$scope
• এমিট 2 - $scopeতখন নিয়ামক 2 দ্বারা দেখা যাবে$rootScope
• সম্প্রচার 3 - কেবলমাত্র নিয়ামক 3 দ্বারা দেখা যাবে $scope
• এমিট 3 - কন্ট্রোলার 3 $scope, $scopeতখন নিয়ামক 2 দেখাবে be$rootScope
• সম্প্রচারের মূল - সমস্ত কন্ট্রোলার $rootScopeএবং $scopeএর দ্বারা দেখা হবে (1, 2 তারপর 3)
• এমিট রুট - কেবলমাত্র দেখা হবে $rootScope

ইভেন্টগুলি ট্রিগার করতে জাভাস্ক্রিপ্ট (আবার আপনি এখানে একটি কাজের উদাহরণ দেখতে পারেন ):

app.controller('Controller1', ['$scope', '$rootScope', function($scope, $rootScope){
    $scope.broadcastAndEmit = function(){
        // This will be seen by Controller 1 $scope and all children $scopes 
        $scope.$broadcast('eventX', {data: '$scope.broadcast'});

        // Because this event is fired as an emit (goes up) on the $rootScope,
        // only the $rootScope will see it
        $rootScope.$emit('eventX', {data: '$rootScope.emit'});
    };
    $scope.emit = function(){
        // Controller 1 $scope, and all parent $scopes (including $rootScope) 
        // will see this event
        $scope.$emit('eventX', {data: '$scope.emit'});
    };

    $scope.$on('eventX', function(ev, args){
        console.log('eventX found on Controller1 $scope');
    });
    $rootScope.$on('eventX', function(ev, args){
        console.log('eventX found on $rootScope');
    });
}]);

Comments

আপনি যে উদাহরণ দিয়েছেন তার সাথে আমি কীভাবে আমার অ্যাপের শ্রেণিবিন্যাস কল্পনা করতে পারি। একজন নিয়ামক কীভাবে পিতা বা মাতা হতে পারেন ?? আমি যা বলতে চাইছি তা হ'ল আমার কাছে ধারাবাহিক রাষ্ট্রের উদাহরণ রয়েছে। লগইনসিআরটিএল -> হোমসিআরএল -> বিজ্ঞপ্তিআরসিআরটিএল ইত্যাদি।

— হীরা ঠাকুর

Answer 3

আপনার একটি জিনিস জানা উচিত $ উপসর্গটি একটি কৌণিক পদ্ধতিকে বোঝায়, f উপসর্গগুলি কৌণিক পদ্ধতিগুলি বোঝায় যা আপনার ব্যবহার এড়ানো উচিত।

নীচে একটি উদাহরণ টেম্পলেট এবং এর নিয়ামক রয়েছে, আমরা কীভাবে $ সম্প্রচার / $ আমাদের যা চাই তা অর্জন করতে সহায়তা করতে পারি explore

<div ng-controller="FirstCtrl">
    <input ng-model="name"/> 
    <button ng-click="register()">Register </button>
</div>

<div ng-controller="SecondCtrl">
    Registered Name: <input ng-model="name"/> 
</div>

নিয়ন্ত্রণকারীরা হয়

app.controller('FirstCtrl', function($scope){
    $scope.register = function(){

    }
});

app.controller('SecondCtrl', function($scope){

});

আপনার কাছে আমার প্রশ্ন হ'ল কোনও ব্যবহারকারী রেজিস্টার করার সময় আপনি কীভাবে দ্বিতীয় নিয়ামকের কাছে নামটি পাস করবেন? আপনি একাধিক সমাধান নিয়ে আসতে পারেন তবে আমরা যেটি ব্যবহার করতে যাচ্ছি তা হ'ল $ সম্প্রচার এবং using চালু using

$ সম্প্রচার বনাম mit নির্গত

আমাদের কোনটি ব্যবহার করা উচিত? $ সম্প্রচারটি সমস্ত বাচ্চাদের ডোম উপাদানগুলিতে নেমে যাবে এবং mit এমিট সমস্ত পূর্বপুরুষের ডোম উপাদানগুলির বিপরীত দিকটি চ্যানেল করবে।

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

$ রুটস্কোপ যুক্ত করা এবং সম্প্রচার করতে দেয়

app.controller('FirstCtrl', function($rootScope, $scope){
    $scope.register = function(){
        $rootScope.$broadcast('BOOM!', $scope.name)
    }
});

নোট আমরা we রুটস্কোপ যোগ করেছি এবং এখন আমরা $ সম্প্রচার (সম্প্রচারনাম, আর্গুমেন্ট) ব্যবহার করছি। ব্রডকাস্টনামের জন্য, আমরা এটিকে একটি অনন্য নাম দিতে চাই যাতে আমরা আমাদের দ্বিতীয়টি সিআরটিএলে সেই নামটি ধরতে পারি। আমি বুমকে বেছে নিয়েছি! শুধুই মজার জন্য. দ্বিতীয় যুক্তি 'আর্গুমেন্ট' আমাদের শ্রোতাদের কাছে মানগুলি সরবরাহ করতে দেয়।

আমাদের সম্প্রচার গ্রহণ

আমাদের দ্বিতীয় নিয়ামকটিতে, আমাদের সম্প্রচার শোনার জন্য আমাদের কোড সেটআপ করতে হবে

app.controller('SecondCtrl', function($scope){
  $scope.$on('BOOM!', function(events, args){
    console.log(args);
    $scope.name = args; //now we've registered!
  })
});

এটা সত্যিই সহজ। সরাসরি উদাহরণ

অনুরূপ ফলাফল অর্জনের অন্যান্য উপায়

এই স্যুট পদ্ধতির ব্যবহার এড়াতে চেষ্টা করুন কারণ এটি দক্ষ বা বজায় রাখা সহজ নয় তবে এটি আপনার কাছে সমস্যা সমাধানের সহজ উপায়।

আপনি সাধারণত কোনও পরিষেবা ব্যবহার করে বা আপনার নিয়ামককে সরল করে একই জিনিসটি করতে পারেন। আমরা এ বিষয়ে বিস্তারিত আলোচনা করব না তবে আমি ভেবেছিলাম আমি এটি সম্পূর্ণতার জন্য উল্লেখ করব।

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

Comments

একটি সতর্কতা হিসাবে, আপনার অ্যাপ্লিকেশনটিতে অনেক বেশি সম্প্রচার / এমিট ব্যবহার না করার চেষ্টা করুন। বিশেষত একটি বড় অ্যাপ্লিকেশনটিতে এগুলি পরিচালনা করা অত্যন্ত কঠিন হতে পারে যেহেতু এই ইভেন্টগুলির মূলগুলি সনাক্ত করা খুব কঠিন কাজ।

— ইয়াং লি

Answer 4

//Your broadcast in service

(function () { 
    angular.module('appModule').factory('AppService', function ($rootScope, $timeout) {

    function refreshData() {  
        $timeout(function() {         
            $rootScope.$broadcast('refreshData');
        }, 0, true);      
    }

    return {           
        RefreshData: refreshData
    };
}); }());

//Controller Implementation
 (function () {
    angular.module('appModule').controller('AppController', function ($rootScope, $scope, $timeout, AppService) {            

       //Removes Listeners before adding them 
       //This line will solve the problem for multiple broadcast call                             
       $scope.$$listeners['refreshData'] = [];

       $scope.$on('refreshData', function() {                                                    
          $scope.showData();             
       });

       $scope.onSaveDataComplete = function() { 
         AppService.RefreshData();
       };
    }); }());