Bagaimanakah saya boleh menggunakan $on dan $broadcast dalam AngularJS untuk memudahkan komunikasi antara pengawal?

Penyebaran Peristiwa dalam Sudut: Memahami $on dan $broadcast

Dalam aplikasi AngularJS, komunikasi antara pengawal berbeza selalunya memerlukan penyebaran peristiwa. Dua kaedah yang memudahkan proses ini ialah $on dan $broadcast.

$broadcast

$broadcast membenarkan pengawal menghantar acara kepada semua pengawal anaknya dan kepada pengawal lain yang telah mendaftar untuk mendengar acara itu. Untuk menghantar acara menggunakan $broadcast:

<code class="javascript">$rootScope.$broadcast('event-name');</code>

$rootScope digunakan kerana ia adalah skop induk bagi semua skop lain dalam aplikasi Sudut.

$on< /h3>

$on membenarkan pengawal mendengar acara yang telah disiarkan oleh pengawal lain atau pengawal induknya. Untuk mendengar acara menggunakan $on:

<code class="javascript">$scope.$on('event-name', function(event, args) {
  // Do something when the event is received
});</code>

Parameter pertama kepada $on ialah nama acara untuk didengar dan parameter kedua ialah fungsi panggil balik yang akan dilaksanakan apabila acara itu diterima. Fungsi panggil balik secara pilihan boleh menerima dua parameter: 'event' dan 'args'.

Contoh

Pertimbangkan situasi yang diterangkan dalam soalan:

<code class="javascript">angular.module('myApp').controller('footerController', ["$scope", function($scope) {}]);

angular.module('myApp').controller('codeScannerController', ["$scope", function($scope) {
  $scope.startScanner = function() {
    // Do something when the button is clicked
  };
}]);</code>

Untuk mendayakan komunikasi antara pengawal ini, anda boleh menggunakan $broadcast dan $on seperti berikut:

In footerController:

<code class="javascript">$scope.startScanner = function() {
  $rootScope.$broadcast('scanner-started');
}</code>

Dalam codeScannerController:

<code class="javascript">$scope.$on('scanner-started', function(event, args) {
  // Do something when the 'scanner-started' event is received
});</code>

Apabila butang diklik dalam footerController, acara yang dimulakan pengimbas akan disiarkan. Acara ini akan diterima dan dikendalikan oleh codeScannerController, membenarkan tindakan yang diperlukan dilakukan.

Meluluskan Argumen

Anda juga boleh menyampaikan hujah bersama-sama acara menggunakan kaedah $rootScope.$broadcast. Contohnya:

<code class="javascript">$rootScope.$broadcast('scanner-started', { any: {} });</code>

Argumen ini kemudiannya boleh diakses dalam fungsi panggil balik $on:

<code class="javascript">$scope.$on('scanner-started', function(event, args) {
  var anyThing = args.any;
  // Do what you want to do
});</code>

Atas ialah kandungan terperinci Bagaimanakah saya boleh menggunakan $on dan $broadcast dalam AngularJS untuk memudahkan komunikasi antara pengawal?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!