Bir denetleyiciyi diğerine çağırmak istiyorsanız dört yöntem vardır
- $ rootScope. $ emit () ve $ rootScope. $ broadcast ()
- İkinci denetleyici çocuksa, Ana çocuk iletişimini kullanabilirsiniz.
- Kullanım Hizmetleri
- Hack türü - angular.element () yardımıyla
1. $ rootScope. $ Emit () ve $ rootScope. $ Broadcast ()
Denetleyici ve kapsamı yok edilebilir, ancak $ rootScope uygulama genelinde kalır, bu yüzden $ rootScope alıyoruz, çünkü $ rootScope tüm kapsamların üstüdür.
Ebeveynten çocuğa iletişim kuruyorsanız ve hatta çocuk kardeşleriyle iletişim kurmak istiyorsa, $ broadcast kullanabilirsiniz
Çocuktan ebeveyne iletişim kuruyorsanız, hiçbir kardeş çağrılmazsa $ rootScope kullanabilirsiniz. $ 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>
Angularjs Kodu
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');
});
});
Yukarıdaki $ emit 'childEmit' kod konsolunda çocuk kardeşleri arayamaz ve $ broadcast'in kardeşlerin ve ebeveynlerin içinde çağrıldığı sadece ebeveyni arayacaktır.Bu, performansın eyleme geçtiği yerdir. bazı kirli denetimleri atladığı için çocuk-ebeveyn iletişimi kullanıyorsanız tercih edilebilir.
2. İkinci denetleyici çocuksa, Çocuk Ebeveyn iletişimini kullanabilirsiniz
En iyi yöntemlerden biri, eğer çocuğun hemen ebeveyn ile iletişim kurmak istediği çocuk ebeveyn iletişimi yapmak istiyorsanız, o zaman herhangi bir tür $ yayın veya $ emit gerekmez, ancak ebeveyn ile çocuk arasında iletişim kurmak istiyorsanız, hizmet veya $ yayın kullan
Örneğin 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);
});
Çocuk-ebeveyn iletişimini her kullandığınızda, Angularjs çocuğun içinde bir değişken arayacaktır, İçinde mevcut değilse, ebeveyn denetleyicisinin içindeki değerleri görmeyi seçecektir.
3. Hizmetleri Kullanın
AngularJS, hizmet mimarisini kullanarak "Endişelerin Ayrılması" kavramlarını destekler . Hizmetler javascript işlevleridir ve yalnızca belirli görevleri yapmaktan sorumludur.Bu, onları sürdürülebilir ve test edilebilir olan bireysel bir varlık haline getirir.
Angularjs kodu:
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 ve Hello Parent World çıktılarını verecektir. Hizmetlerin açısal belgelerine göre Teklitonlar - Bir hizmete bağımlı her bileşen, hizmet fabrikası tarafından oluşturulan tek örneğe başvuru alır .
4. kesmek türü - açısal.element () yardımıyla
Bu yöntem, scope () öğesini Id / unique class.angular.element () yöntemiyle öğeden alır ve element ve scope (), bir denetleyicinin $ scope değişkenini kullanarak başka bir değişkenin $ scope değişkenini diğerinin içinde iyi bir uygulama değildir.
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);
}
});
Yukarıdaki kod denetleyicileri Html üzerinde kendi değerlerini gösterir ve metne tıkladığınızda buna göre konsolda değerler alırsınız.Ana denetleyicilerin açıklığına tıklarsanız, tarayıcı çocuk ve viceversa değerini konsolize eder.