Если вы хотите вызвать один контроллер в другой, доступны четыре метода
- $ rootScope. $ Emit () и $ rootScope. $ Broadcast ()
- Если Второй контроллер дочерний, вы можете использовать родительское дочернее общение.
- Услуги пользования
- Вид хака - с помощью angular.element ()
1. $ rootScope. $ emit () и $ rootScope. $ broadcast ()
Контроллер и его область действия могут быть уничтожены,
но $ rootScope остается в приложении, поэтому мы берем $ rootScope, потому что $ rootScope является родительским для всех областей.
Если вы осуществляете связь от родителя к ребенку, и даже ребенок хочет общаться со своими братьями и сестрами, вы можете использовать $ broadcast
Если вы осуществляете связь от ребенка к родителю, братья и сестры не задействованы, тогда вы можете использовать $ 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 предпочтительнее, если вы используете связь «ребенок-родитель», потому что она пропускает некоторые грязные проверки.
2. Если Второй контроллер дочерний, вы можете использовать связь Родитель-ребенок
Это один из лучших способов, если вы хотите дочернее родительское общение там, где ребенок хочет общаться с непосредственным родителем , тогда ему не понадобится никакой трансляции $ или $ emit но если вы хотите общаться от родителя к ребенку, вы должны использовать либо услугу, либо $ 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);
});
Всякий раз, когда вы используете связь потомка с родителем, 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. Согласно Angular docs of services Singletons - каждый компонент, зависящий от сервиса, получает ссылку на один экземпляр, сгенерированный фабрикой сервисов .
4. Вид взлома - с помощью angular.element ()
Этот метод получает scope () из элемента по его идентификатору / уникальному методу class.angular.element () возвращает 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, и когда вы будете нажимать на текст, вы получите соответствующие значения в консоли. Если вы щелкнете по родительскому диапазону контроллеров, браузер отобразит значение дочернего элемента и наоборот.