Если вы хотите вызвать один контроллер в другой, доступны четыре метода
- $ 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 также вызывается внутри братьев и сестер и родителя. Это место, где производительность вступает в действие. предпочтительнее, если вы используете связь ребенка с родителем, потому что она пропускает некоторые грязные проверки.
2. Если Второй контроллер дочерний, вы можете использовать связь Родитель-ребенок
Это один из лучших способов: если вы хотите установить связь между родителем и ребенком, когда ребенок хочет общаться с непосредственным родителем, тогда он не нуждается ни в каком виде $ broadcast или $ emit, но если вы хотите установить связь от родителя к ребенку, тогда вам придется использовать либо сервис, либо $ широковещательную рассылку
Например 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 и отвечают только за выполнение определенных задач. Это делает их отдельной сущностью, которую можно обслуживать и тестировать. Сервисы, используемые для внедрения с помощью механизма Dependency Injection от 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 Singles - каждый компонент, зависящий от сервиса, получает ссылку на один экземпляр, сгенерированный фабрикой сервисов .
4. Вид взлома - с помощью angular.element ()
Этот метод получает scope () из элемента по его идентификатору / уникальному методу class.angular.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, и когда вы нажмете на текст, вы получите соответствующие значения в консоли. Если вы нажмете на родительский диапазон контроллеров, браузер отобразит значение child и наоборот.