首頁 >web前端 >js教程 >`$scope.$emit` 和 `$scope.$on` 如何促進 AngularJS 控制器中的事件通訊?

`$scope.$emit` 和 `$scope.$on` 如何促進 AngularJS 控制器中的事件通訊?

Mary-Kate Olsen
Mary-Kate Olsen原創
2024-12-11 11:58:12960瀏覽

How Do `$scope.$emit` and `$scope.$on` Facilitate Event Communication in AngularJS Controllers?

控制器中使用$scope.$emit 和$scope.$on

$scope.$emit 和$scope.$ 進行事件通訊on 是促進控制器之間事件通訊的基本AngularJS 方法。然而,理解它們的精確行為對於有效實現至關重要。

$emit 方法

$emit 從控制器調度一個事件,透過範圍層次結構向上發送它。它允許控制器與父作用域和潛在的其他子作用域進行通訊。

$on 方法

$on 偵聽其他控制器所發出的事件。它的回調函數接收一個事件對象,其中包含有關所發出事件的詳細信息,包括傳遞的資料。

符合事件名稱

使用 $emit 和 $on 時,這一點很重要使用符合的事件名稱。事件名稱決定哪些控制器將接收該事件。

範圍關係

控制器範圍之間的關係決定哪些通訊方式有效。

親子關係

在親子範圍內關係,父控制器中的 $broadcast (發射)和子控制器中的 $on (監聽)就足夠了。

範例:

function firstCtrl($scope) {
    $scope.$broadcast('someEvent', [1,2,3]);
}

function secondCtrl($scope) {
    $scope.$on('someEvent', function(event, mass) { console.log(mass); });
}

無親子關係

如果沒有親子關係,則注入控制器中的$ rootScope 並使用$rootScope.$broadcast 將確保事件到達所有範圍。

範例:

function firstCtrl($rootScope) {
    $rootScope.$broadcast('someEvent', [1,2,3]);
}

從子級調度事件到父級

要將事件從子級調度事件到父級

要將事件從子級範圍分派到父級範圍,請使用子控制器中的$scope.$emit 和父控制器中的$scope.$on。

function firstCtrl($scope) {
    $scope.$on('someEvent', function(event, data) { console.log(data); });
}

function secondCtrl($scope) {
    $scope.$emit('someEvent', [1,2,3]);
}
範例:

以上是`$scope.$emit` 和 `$scope.$on` 如何促進 AngularJS 控制器中的事件通訊?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn