Angular コントローラー通信の 4 つの方法に関する簡単な説明

この記事では、angular コントローラー通信の 4 つの方法を紹介します。一定の参考値があるので、困っている友達が参考になれば幸いです。

[関連する推奨事項: "angular チュートリアル "]

まず、Angular コントローラー通信の 4 つの方法を要約します。

• スコープの継承。

• $scope を通じてイベントをブロードキャストします。

• イベント エミッター モジュール。 ＃＃＃＃＃＃＃＃＃＃＃＃仕える。

• 1. スコープの継承

サブスコープは、祖先スコープで宣言された変数と関数にアクセスできます。

<div ng-controller="Controller1">
	<div ng-controller="Controller2">
		this prints '42':{{answer}}
	</div>
</div>
m.controller('Controller1', function ($scope) {
	$scope.answer = 42;
});
m.controller('Controller2', function ($scope) {
	console.log($scope.answer);
});

2. $scope を介したイベントのブロードキャスト

$emit 呼び出しはスコープをバブルアップでき、$broadcast は子孫スコープに伝播し、$on はリスナーを登録できます。

<div ng-controller="Controller1">
	<div ng-controller="Controller2">
	
	</div>
</div>
m.controller('Controller1', function ($scope) {
	$scope.$on('ping', function (){
		console.log('pong');
	});
	$scope.$broadcast('broadcast');
});
m.controller('Controller2', function ($scope) {
	$scope.$emit('ping');
	$scope.$on('broadcast', function (){
		console.log('broadcast');
	});
});

3. イベント エミッター モジュールevent-emitter

イベント エミッター モジュールはスコープ エミッターと同様に機能しますが、主な違いが 3 つあります:

イベントエミッターはスコープに依存しないため、スコープにアクセスできないサービスで使用するのが理想的です。

• 使用する関数の名前は .on()、.emit() です。

• 対応する $broadcast() 関数はありません。

• <script type="text/javascript" src="angular.js"></script>
  <script type="text/javascript" src="event-emitter.js"></script>
  <script type="text/javascript">
  	var app = angular.module('app', []);
   
  	app.factory('userService', function ($timeout, $window) {
  		var emitter = $window.emitter();
  		var user = {};
   
  		//模拟http错误
  		$timeout(function () {
  			user.emit('error', 'Could not connect to server');
  		}, 1000);
   
  		return user;
  	});
   
  	app.factory('profileService', function (userService) {
  		var ret = {
  			user: userService,
  		};
   
  		userService.on('error', function () {
  			console.log('get error');
  		});
   
  		return ret;
  	});
  </script>

  4. 最も一般的に使用される通信はサービスです

サービスはシングルトンであるため、コンポーネント内のサービスの値を変更します他のコンポーネントに影響を与える場合、使用方法は非常に簡単で、上記のコードに示すように、サービスを依存関係としてリストするだけです。 プログラミング関連の知識について詳しくは、

プログラミング教育

をご覧ください。 ！

以上がAngular コントローラー通信の 4 つの方法に関する簡単な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。