Verwendung von $broadcast() in AngularJS
Dieser Artikel stellt $broadcast() in AngularJS vor.
Verwenden Sie $broadcast() in AngularJS
$broadcast() ist eine $rootScope-Methode zum Senden von Ereignissen von übergeordneten Controllern an untergeordnete Controller. Es sendet ein Ereignis, das der Listener dieses bestimmten Bereichs abfangen kann.
Sobald das Ereignis vom übergeordneten Controller an einen untergeordneten Controller gesendet wurde, kann der untergeordnete Controller das Ereignis mit einer anderen Methode verarbeiten, $scope.$on.
Gehen wir ein Beispiel durch, in dem wir $broadcast() verwenden. Zuerst erstellen wir eine neue Datei, script.js, in der wir unsere Controller definieren.
Wir werden eine Nachricht von unserem übergeordneten Controller an einen untergeordneten Controller senden, indem wir $broadcast() verwenden, und wir werden das Ereignis in unserem untergeordneten Controller empfangen und es in die Konsole protokollieren, indem wir eine andere Methode verwenden, $scope.$on(), wie unten gezeigt.
# angular
import angular from 'angular';
var app = angular.module('app', []);
app.controller("parentCtrl", function ($scope) {
$scope.handleClick = function (msg) {
$scope.$broadcast('sendMsg', { message: msg });
};
});
app.controller("childCtrl", function ($scope) {
$scope.$on('sendMsg', function (event, args) {
$scope.message = args.message;
console.log($scope.message);
});
});
Lassen Sie uns nun ein Frontend in index.html erstellen, in dem wir eine Eingabe erstellen, die eine Nachricht vom übergeordneten Controller entgegennimmt. Wenn wir auf die Schaltfläche Senden klicken, wird sie an den untergeordneten Controller gesendet.
Der untergeordnete Controller empfängt die Nachricht und meldet sie wie unten gezeigt an der Konsole an.
# angular
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="lib/style.css" />
<script src="lib/script.js"></script>
</head>
<body ng-app="app">
<div ng-controller="parentCtrl">
<h1>Send to Child controller</h1>
<input ng-model="msg">
<button ng-click="handleClick(msg);">Broadcast</button>
<br /><br />
<div ng-controller="childCtrl">
</div>
</div>
</body>
</html>
Ausgang:
Konsole:
Aus dem obigen Beispiel haben wir mit $broadcast() Ereignisse oder Nachrichten von übergeordneten Controllern an untergeordnete Controller gesendet. Und mit der Methode $scope.$on() haben wir das Ereignis oder die Nachricht im untergeordneten Controller empfangen und einige Funktionen ausgeführt.
Rana is a computer science graduate passionate about helping people to build and diagnose scalable web application problems and problems developers face across the full-stack.
LinkedIn