Jika Anda ingin memanggil satu pengontrol ke yang lain ada empat metode yang tersedia
- $ rootScope. $ emit () dan $ rootScope. $ broadcast ()
- Jika Kontroler kedua adalah anak, Anda dapat menggunakan komunikasi Anak Induk.
- Gunakan Layanan
- Jenis retasan - dengan bantuan angular.element ()
1. $ rootScope. $ Emit () dan $ rootScope. $ Broadcast ()
Kontroler dan cakupannya bisa dihancurkan, tetapi $ rootScope tetap ada di seluruh aplikasi, itu sebabnya kami mengambil $ rootScope karena $ rootScope adalah induk dari semua lingkup.
Jika Anda melakukan komunikasi dari orang tua ke anak dan bahkan anak ingin berkomunikasi dengan saudara kandungnya, Anda dapat menggunakan $ broadcast
Jika Anda melakukan komunikasi dari anak ke orang tua, tidak ada saudara yang terlibat maka Anda dapat menggunakan $ rootScope. $ Emit
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>
Kode Angular
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');
});
});
Dalam kode di atas konsol $ emit 'childEmit' tidak akan memanggil saudara dalam dan itu akan memanggil orangtua hanya di dalam, di mana $ broadcast dipanggil di dalam saudara dan orang tua juga. Ini adalah tempat di mana kinerja beraksi. $ Emit adalah lebih disukai, jika Anda menggunakan komunikasi anak ke orang tua karena itu melewatkan beberapa pemeriksaan kotor.
2. Jika pengontrol kedua adalah anak, Anda dapat menggunakan komunikasi Orangtua Anak
Ini salah satu metode terbaik, Jika Anda ingin melakukan komunikasi orang tua anak di mana anak ingin berkomunikasi dengan orang tua langsung maka itu tidak memerlukan $ broadcast atau $ emit tetapi jika Anda ingin melakukan komunikasi dari orang tua ke anak maka Anda harus baik menggunakan layanan atau $ broadcast
Misalnya 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);
});
Setiap kali Anda menggunakan komunikasi child to parent, Angularjs akan mencari variabel inside child, Jika tidak ada di dalamnya maka ia akan memilih untuk melihat nilai-nilai di dalam pengontrol induk.
3.Gunakan Layanan
AngularJS mendukung konsep "Seperation of Concerns" menggunakan arsitektur layanan. Layanan adalah fungsi javascript dan bertanggung jawab untuk melakukan tugas tertentu saja. Ini menjadikannya entitas individu yang dapat dipelihara dan diuji. Layanan yang digunakan untuk menyuntikkan menggunakan Dependency Injection mecahnism dari Angularjs.
Kode 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");
});
Ini akan memberikan output Hello Child World dan Hello Parent World. Menurut dokumen Angular dari layanan Singletons - Setiap komponen yang bergantung pada layanan mendapat referensi ke instance tunggal yang dihasilkan oleh pabrik layanan .
4.Jenis hack - dengan bantuan angular.element ()
Metode ini mendapatkan scope () dari elemen dengan metode Id / unique class.angular.element () mengembalikan elemen dan scope () memberikan variabel $ scope dari variabel lain menggunakan $ scope variable dari satu pengontrol di dalam pengontrol lain bukanlah praktik yang baik.
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);
}
});
Dalam pengendali kode di atas menunjukkan nilai mereka sendiri pada Html dan ketika Anda akan mengklik teks Anda akan mendapatkan nilai-nilai di konsol yang sesuai. Jika Anda mengklik rentang pengendali induk, browser akan menghibur nilai anak dan sebaliknya.