>  기사  >  웹 프론트엔드  >  각도 컨트롤러 통신의 4가지 방법에 대한 간략한 설명

각도 컨트롤러 통신의 4가지 방법에 대한 간략한 설명

青灯夜游
青灯夜游앞으로
2021-05-14 11:07:592051검색

이 글에서는 컨트롤러 통신의 angular 4가지 방법을 소개합니다. 도움이 필요한 친구들이 모두 참고할 수 있기를 바랍니다.

각도 컨트롤러 통신의 4가지 방법에 대한 간략한 설명

【관련 추천: "angular Tutorial"】

먼저 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

event-emitter 모듈은 3가지 주요 차이점이 있습니다.

  • event-emitter는 범위에 독립적이므로 다음에서 사용하는 것이 이상적입니다. 범위에 액세스할 수 없는 서비스.

  • 사용될 함수의 이름은 .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. 가장 일반적으로 사용되는 통신은 service입니다.

서비스는 싱글톤이므로 모든 구성 요소에서 서비스 값을 변경하면 다른 구성 요소에 영향을 미치게 됩니다. 서비스를 다음과 같이 나열하면 됩니다. 위의 코드에 표시된 대로 dependency.

더 많은 프로그래밍 관련 지식을 보려면 프로그래밍 교육을 방문하세요! !

위 내용은 각도 컨트롤러 통신의 4가지 방법에 대한 간략한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
이 기사는 csdn.net에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제