Якщо ви хочете зателефонувати одному контролеру в інший, є чотири способи
- $ rootScope. $ emit () і $ rootScope. $ Broadcast ()
- Якщо другий контролер є дочірнім, ви можете використовувати спілкування з дитиною батьків.
- Користуйтеся послугами
- Вид хаку - за допомогою angular.element ()
1. $ rootScope. $ Emit () і $ rootScope. $ Broadcast ()
Контролер і його сфера можуть бути знищені, але $ rootScope залишається в додатку, тому ми беремо $ rootScope, оскільки $ rootScope є батьківським для всіх областей.
Якщо ви здійснюєте спілкування від батька до дитини і навіть дитина хоче спілкуватися зі своїми побратимами, ви можете скористатись $ мовленням
Якщо ви здійснюєте спілкування від дитини до батька, братів та сестер не призначається, ви можете використовувати $ 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>
Код 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 викликають всередині братів та сестер та батьків. Це місце, де продуктивність починає діяти. $ Emit is бажано, якщо ви використовуєте дитину для батьківського спілкування, оскільки це пропускає деякі брудні чеки.
2. Якщо другий контролер є дочірнім, ви можете використовувати комунікацію з батьком
Це один з найкращих методів: Якщо ви хочете спілкуватися з дитиною з батьків, де дитина хоче спілкуватися з безпосереднім батьком, то йому не знадобиться будь-яка трансляція $ або емісія $, але якщо ви хочете спілкуватися від батька до дитини, то вам доведеться використовувати або сервіс, або $ мовлення
Наприклад, 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);
});
Щоразу, коли ви використовуєте дочірнє та батьківське спілкування, Angularjs буде шукати змінну всередині дочірніх даних. Якщо її немає всередині, то він вирішить переглянути значення всередині батьківського контролера.
3.Використовуйте послуги
AngularJS підтримує концепції "Розмежування проблем", використовуючи архітектуру служб. Служби - це функції JavaScript і відповідають за виконання конкретних завдань. Це робить їх індивідуальною сутністю, яка є ретельною та перевіряемою. Сервіси, які використовуються для ін'єкцій, використовуючи механізм введення залежностей від Angularjs.
Код 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. Згідно з кутовими документами послуг Singletons - кожен компонент, що залежить від послуги, отримує посилання на єдиний екземпляр, створений фабрикою послуг .
4. Вид хак - за допомогою angular.element ()
Цей метод отримує область () від елемента за допомогою його Id / унікального методу class.angular.element (), що повертає елемент, а область () дає $ змінну області іншої змінної, використовуючи змінну $ range одного контролера всередині іншого, не є хорошою практикою.
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, і коли ви натиснете на текст, ви отримаєте значення відповідно в консолі. Якщо ви натиснете на батьківський контролер, то браузер буде консолірувати значення дочірнього і віверса.