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

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

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

Dependency Injection

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

<br>angular.module('myApp', []).<br> service('DataService' 、 function() {</p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><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>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">$scope.$on('dateUpdated', function(event, newDate) {
  $scope.message = newDate;
});

ログイン後にコピー