AngularJS でコントローラーはどのように相互に通信できますか?

AngularJS でのコントローラー間通信

AngularJS では、あるコントローラーが別のコントローラーを呼び出すことができます。これを実現するにはいくつかのアプローチがあり、それぞれに独自の利点と使用例があります。

Dependency Injection

この例では、HTML ドキュメントは MessageCtrl コントローラーを使用してメッセージを表示します。別のコントローラーからデータを渡すには、通信を仲介するサービスを作成できます。

<br>angular.module('myApp', []).<br> service('DataService' 、 function() {</p>
<pre class="brush:php;toolbar:false">this.data = { date: new Date().toString() };

}).
コントローラー('MessageCtrl', ['$scope', 'DataService', function($scope, DataService) {

$scope.message = DataService.data.date;

}]).
コントローラー('DateCtrl', ['DataService', function(DataService) {

DataService.data.date = 'Custom date format';

}]);

このシナリオでは、MessageCtrl は DataService にアクセスできます。DataService は DateCtrl によって日付形式を変更するためにも使用されます。 。これにより、コントローラー間の通信が確実に同期されます。

スコープ イベント

もう 1 つの方法は、スコープでイベントを発行することです。イベントが発行されると、そのイベントのリスナーを登録しているすべてのコントローラーが応答できます。

<br>angular.module('myApp', []).<br>controller(' MessageCtrl', ['$scope', function($scope) {</p>
<pre class="brush:php;toolbar:false">$scope.$on('dateUpdated', function(event, newDate) {
  $scope.message = newDate;
});

}]).
controller('DateCtrl', ['$scope', function($scope) {

$scope.$emit('dateUpdated', 'Custom date format');

}]);

この例では、DateCtrl MessageCtrl がリッスンし、メッセージを更新することで応答するイベントを発行します。これにより、より反応的な通信パターンが可能になります。

これらは、AngularJS でコントローラー間通信を実現する方法のほんの一部です。最適なアプローチは、アプリケーションの特定の要件によって異なります。

以上がAngularJS でコントローラーはどのように相互に通信できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。