Может ли один контроллер AngularJS вызывать другой?

Может ли один контроллер AngularJS вызвать другой?

Если вы хотите вызвать один контроллер в другой, доступны четыре метода

  1. $ rootScope. $ emit () и $ rootScope. $ broadcast ()
  2. Если Второй контроллер дочерний, вы можете использовать родительское дочернее общение.
  3. Используйте Сервисы
  4. Вид взлома — с помощью angular.element ()

1. $ rootScope. $ Emit () и $ rootScope. $ Broadcast ()

Контроллер и его область действия могут быть разрушены, но $ rootScope остается в приложении, поэтому мы берем $ rootScope, потому что $ rootScope является родительским для всех областей.

Если вы осуществляете общение от родителя к ребенку, и даже ребенок хочет общаться со своими братьями и сестрами, вы можете использовать $ broadcast

Если вы осуществляете связь от ребенка к родителю, братьев и сестер не будет, тогда вы можете использовать $ rootScope. $ Emit

HTML

{amp}lt;body ng-app="myApp"{amp}gt; {amp}lt;div ng-controller="ParentCtrl" class="ng-scope"{amp}gt; // ParentCtrl {amp}lt;div ng-controller="Sibling1" class="ng-scope"{amp}gt; // Sibling first controller {amp}lt;/div{amp}gt; {amp}lt;div ng-controller="Sibling2" class="ng-scope"{amp}gt; // Sibling Second controller {amp}lt;div ng-controller="Child" class="ng-scope"{amp}gt; // Child controller {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/body{amp}gt; 

Код 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: —

 {amp}lt;div ng-controller="ParentCtrl"{amp}gt; {amp}lt;div ng-controller="ChildCtrl"{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; 

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: —

 {amp}lt;div id='parent' ng-controller='ParentCtrl'{amp}gt;{{varParent}} {amp}lt;span ng-click='getValueFromChild()'{amp}gt;Click to get ValueFormChild{amp}lt;/span{amp}gt; {amp}lt;div id='child' ng-controller='childCtrl'{amp}gt;{{varChild}} {amp}lt;span ng-click='getValueFromParent()'{amp}gt;Click to get ValueFormParent {amp}lt;/span{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; 

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, и когда вы нажмете на текст, вы получите соответствующие значения в консоли. Если вы щелкнете по родительскому диапазону контроллеров, браузер отобразит значение дочернего элемента и наоборот.

Понравилась статья? Поделиться с друзьями:
JavaScript & TypeScript
Adblock
detector