Jeśli chcesz połączyć jeden kontroler z innym, dostępne są cztery metody
- $ rootScope. $ emit () i $ rootScope. $ broadcast ()
- Jeśli drugim kontrolerem jest dziecko, możesz skorzystać z nadrzędnej komunikacji podrzędnej.
- Skorzystaj z usług
- Rodzaj hacka - za pomocą angular.element ()
1. $ rootScope. $ Emit () i $ rootScope. $ Broadcast ()
Kontroler i jego zakres mogą zostać zniszczone, ale $ rootScope pozostaje w aplikacji, dlatego bierzemy $ rootScope, ponieważ $ rootScope jest rodzicem wszystkich zakresów.
Jeśli prowadzisz komunikację między rodzicem a dzieckiem, a nawet dziecko chce komunikować się z rodzeństwem, możesz użyć programu $ broadcast
Jeśli wykonujesz komunikację między dzieckiem a rodzicem, żadne rodzeństwo nie jest powiązane, możesz użyć $ 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>
Kod 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');
});
});
W powyższej kodzie konsoli $ emit „childEmit” nie będzie wywoływał rodzeństwa podrzędnego i będzie wywoływał tylko rodzica, gdzie $ broadcast zostanie wywołany również wewnątrz rodzeństwa i rodzica. To jest miejsce, w którym występuje wydajność. preferowane, jeśli używasz komunikacji dziecko-rodzic, ponieważ pomija ona niektóre brudne kontrole.
2. Jeśli drugi kontroler jest dzieckiem, możesz użyć komunikacji Dziecko-rodzic
Jest to jedna z najlepszych metod. Jeśli chcesz przeprowadzić komunikację między rodzicem a dzieckiem, w której dziecko chce komunikować się z bezpośrednim rodzicem , nie potrzebuje żadnej emisji lub emisji, ale jeśli chcesz nawiązać komunikację między rodzicem a dzieckiem, musisz użyj usługi lub $ broadcast
Na przykład 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);
});
Za każdym razem, gdy używasz komunikacji dziecko-rodzic, Angularjs szuka zmiennej wewnątrz dziecka, jeśli nie jest ona obecna w środku, wybierze wyświetlanie wartości w kontrolerze nadrzędnym.
3.Korzystaj z usług
AngularJS obsługuje koncepcje „oddzielania obaw” przy użyciu architektury usług. Usługi są funkcjami javascript i są odpowiedzialne za wykonywanie tylko określonych zadań, co czyni je indywidualnymi jednostkami, które można konserwować i testować .
Kod 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");
});
Daje wyjście Hello Child World i Hello Parent World. Według dokumentów Angular usług Singletons - Każdy komponent zależny od usługi otrzymuje odniesienie do pojedynczego wystąpienia wygenerowanego przez fabrykę usług .
4. Rodzaj hacka - za pomocą angular.element ()
Ta metoda pobiera zakres () z elementu za pomocą swojej metody Id / unique class.angular.element () zwraca element, a scope () daje zmienną $ scope innej zmiennej przy użyciu zmiennej $ scope jednego kontrolera wewnątrz drugiego, nie jest dobrą praktyką.
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);
}
});
W powyższym kodzie kontrolery wyświetlają swoją wartość na HTML, a kiedy klikniesz tekst, otrzymasz odpowiednio wartości w konsoli. Jeśli klikniesz na zakres kontrolerów nadrzędnych, przeglądarka konsoluje wartość child i viceversa.