하나의 컨트롤러를 다른 컨트롤러로 호출하려면 사용할 수있는 네 가지 방법이 있습니다
- $ rootScope. $ emit () 및 $ rootScope. $ broadcast ()
- 보조 컨트롤러가 자식 인 경우 부모 자식 통신을 사용할 수 있습니다.
- 서비스 이용
- 해킹의 종류-angular.element ()의 도움으로
1. $ rootScope. $ emit () 및 $ rootScope. $ broadcast ()
컨트롤러와 해당 범위는 손상 될 수 있지만 $ rootScope는 애플리케이션 전체에 남아 있으므로 $ rootScope는 모든 범위의 상위이므로 $ rootScope를 사용합니다.
부모와 자녀 사이에 의사 소통을하고 있고 심지어 자녀가 형제와 의사 소통하기를 원한다면 $ broadcast를 사용할 수 있습니다
자식에서 부모로의 통신을 수행하는 경우 형제가 없습니다. $ rootScope를 사용할 수 있습니다.
HTML
<body ng-app="myApp">
<div ng-controller="ParentCtrl" class="ng-scope">
// ParentCtrl
<div ng-controller="Sibling1" class="ng-scope">
// Sibling first controller
</div>
<div ng-controller="Sibling2" class="ng-scope">
// Sibling Second controller
<div ng-controller="Child" class="ng-scope">
// Child controller
</div>
</div>
</div>
</body>
Angularjs 코드
var app = angular.module('myApp',[]);//We will use it throughout the example
app.controller('Child', function($rootScope) {
$rootScope.$emit('childEmit', 'Child calling parent');
$rootScope.$broadcast('siblingAndParent');
});
app.controller('Sibling1', function($rootScope) {
$rootScope.$on('childEmit', function(event, data) {
console.log(data + ' Inside Sibling one');
});
$rootScope.$on('siblingAndParent', function(event, data) {
console.log('broadcast from child in parent');
});
});
app.controller('Sibling2', function($rootScope) {
$rootScope.$on('childEmit', function(event, data) {
console.log(data + ' Inside Sibling two');
});
$rootScope.$on('siblingAndParent', function(event, data) {
console.log('broadcast from child in parent');
});
});
app.controller('ParentCtrl', function($rootScope) {
$rootScope.$on('childEmit', function(event, data) {
console.log(data + ' Inside parent controller');
});
$rootScope.$on('siblingAndParent', function(event, data) {
console.log('broadcast from child in parent');
});
});
위의 $ emit 'childEmit'코드 콘솔에서는 자식 형제 내부를 호출하지 않으며 부모 내부에서만 호출합니다. 여기서 부모는 $ broadcast가 형제 및 부모 내부에서도 호출됩니다. 이것은 성능이 작동하는 곳입니다. 더티 검사를 건너 뛰기 때문에 자녀 간 통신을 사용하는 경우 선호됩니다.
2. 보조 컨트롤러가 하위 인 경우 하위 부모 커뮤니케이션을 사용할 수 있습니다
가장 좋은 방법 중 하나입니다 . 자녀가 직계 부모 와 의사 소통하기를 원하는 자녀 부모 의사 소통을 원한다면 어떤 종류의 $ broadcast 또는 $ emit이 필요하지 않지만 부모와 자녀 사이의 의사 소통을 원한다면 service 또는 $ broadcast를 사용하십시오
예를 들어 HTML :-
<div ng-controller="ParentCtrl">
<div ng-controller="ChildCtrl">
</div>
</div>
Angularjs
app.controller('ParentCtrl', function($scope) {
$scope.value='Its parent';
});
app.controller('ChildCtrl', function($scope) {
console.log($scope.value);
});
Child to Parent 통신을 사용할 때마다 Angularjs는 Child 내부의 변수를 검색합니다. 내부에 존재하지 않으면 상위 컨트롤러 내부의 값을 보도록 선택합니다.
3. 서비스 이용
AngularJS는 서비스 아키텍처를 사용하여 "문제의 분리" 개념을 지원합니다 . 서비스는 자바 스크립트 기능이며 특정 작업 만 수행 할 책임이 있습니다. 따라서 서비스는 유지 관리 및 테스트가 가능한 개별 엔티티 가 됩니다. Angularjs의 Dependency Injection mecahnism을 사용하여 주입하는 데 사용되는 서비스입니다.
Angularjs 코드 :
app.service('communicate',function(){
this.communicateValue='Hello';
});
app.controller('ParentCtrl',function(communicate){//Dependency Injection
console.log(communicate.communicateValue+" Parent World");
});
app.controller('ChildCtrl',function(communicate){//Dependency Injection
console.log(communicate.communicateValue+" Child World");
});
출력 Hello Child World 및 Hello Parent World가 출력됩니다. Angular 서비스 문서에 따르면 Singletons – 서비스에 종속 된 각 구성 요소는 서비스 팩토리에서 생성 된 단일 인스턴스에 대한 참조를 가져옵니다 .
해킹의 종류-angular.element ()의 도움으로
이 메소드는 Id / unique class.angular.element () 메소드로 요소에서 scope ()를 가져옵니다. element를 리턴하고 scope ()는 한 컨트롤러의 $ scope 변수를 사용하여 다른 변수의 $ scope 변수를 제공합니다.
HTML :-
<div id='parent' ng-controller='ParentCtrl'>{{varParent}}
<span ng-click='getValueFromChild()'>Click to get ValueFormChild</span>
<div id='child' ng-controller='childCtrl'>{{varChild}}
<span ng-click='getValueFromParent()'>Click to get ValueFormParent </span>
</div>
</div>
Angularjs :-
app.controller('ParentCtrl',function($scope){
$scope.varParent="Hello Parent";
$scope.getValueFromChild=function(){
var childScope=angular.element('#child').scope();
console.log(childScope.varChild);
}
});
app.controller('ChildCtrl',function($scope){
$scope.varChild="Hello Child";
$scope.getValueFromParent=function(){
var parentScope=angular.element('#parent').scope();
console.log(parentScope.varParent);
}
});
위의 코드에서 컨트롤러는 Html에 자체 값을 표시하고 텍스트를 클릭하면 콘솔에 따라 값이 표시됩니다. 부모 컨트롤러 범위를 클릭하면 브라우저가 자식의 콘솔 값을 가져오고 그 반대도 마찬가지입니다.