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

Question

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

528

Возможно ли, что один контроллер использует другой?

Например:

Этот документ HTML просто печатает сообщение, отправленное контроллером MessageCtrl в файле messageCtrl.js.

<html xmlns:ng="http://angularjs.org/">
<head>
    <meta charset="utf-8" />
    <title>Inter Controller Communication</title>
</head>
<body>
    <div ng:controller="MessageCtrl">
        <p>{{message}}</p>
    </div>

    <!-- Angular Scripts -->
    <script src="http://code.angularjs.org/angular-0.9.19.js" ng:autobind></script>
    <script src="js/messageCtrl.js" type="text/javascript"></script>
</body>
</html>

Файл контроллера содержит следующий код:

function MessageCtrl()
{
    this.message = function() { 
        return "The current date is: " + new Date().toString(); 
    };
}

который просто печатает текущую дату;

Если бы я добавил еще один контроллер, DateCtrl, который вернул дату в определенном формате обратно на MessageCtrl, как бы это сделать? Структура DI, по-видимому, связана с XmlHttpRequests и доступом к службам.

BanksySan 15 фев. 2012, в 10:58

Источник

4

В этой теме группы Google, groups.google.com/d/topic/angular/m_mn-8gnNt4/discussion , обсуждаются 5 способов взаимодействия контроллеров друг с другом.
Mark Rajcok 12 авг. 2012, в 01:49
0

Здесь уже есть хорошие ответы, поэтому я просто хотел бы отметить, что для конкретного упомянутого варианта использования, возможно, лучшим решением будет фильтр AngularJS? Просто подумал, что упомяну это :)
Joe Dyndale 24 нояб. 2012, в 19:16

Теги:

javascript

html

angularjs

13 ответов

122

Смотрите эту скрипту: http://jsfiddle.net/simpulton/XqDxG/

Также смотрите следующее видео: Связь между контроллерами

Html:

<div ng-controller="ControllerZero">
  <input ng-model="message" >
  <button ng-click="handleClick(message);">LOG</button>
</div>

<div ng-controller="ControllerOne">
  <input ng-model="message" >
</div>

<div ng-controller="ControllerTwo">
  <input ng-model="message" >
</div>

JavaScript:

var myModule = angular.module('myModule', []);
myModule.factory('mySharedService', function($rootScope) {
  var sharedService = {};

  sharedService.message = '';

  sharedService.prepForBroadcast = function(msg) {
    this.message = msg;
    this.broadcastItem();
  };

  sharedService.broadcastItem = function() {
    $rootScope.$broadcast('handleBroadcast');
  };

  return sharedService;
});

function ControllerZero($scope, sharedService) {
  $scope.handleClick = function(msg) {
    sharedService.prepForBroadcast(msg);
  };

  $scope.$on('handleBroadcast', function() {
    $scope.message = sharedService.message;
  });        
}

function ControllerOne($scope, sharedService) {
  $scope.$on('handleBroadcast', function() {
    $scope.message = 'ONE: ' + sharedService.message;
  });        
}

function ControllerTwo($scope, sharedService) {
  $scope.$on('handleBroadcast', function() {
    $scope.message = 'TWO: ' + sharedService.message;
  });
}

ControllerZero.$inject = ['$scope', 'mySharedService'];        

ControllerOne.$inject = ['$scope', 'mySharedService'];

ControllerTwo.$inject = ['$scope', 'mySharedService'];

adardesign 07 авг. 2012, в 14:26

12

Вышеуказанная скрипка и видео совместно используют сервис. Вот скрипка, которая использует $ scope. $ Emit : jsfiddle.net/VxafF
Mark Rajcok 12 авг. 2012, в 01:32
1

@adardesign: Я ЛЮБЛЮ читать тот же краткий и содержательный пример для директив (спасибо за этот ответ тоже!)
sscarduzio 22 июль 2014, в 11:19
0

Отличный ответ, я использую myModule.service ('mySharedService', функция ($ rootScope) {}) вместо myModule.factory, но, тем не менее, работает!
TacoEater 28 сен. 2015, в 12:48
0

Отлично. Однако у меня есть вопрос: почему вы добавили обработчик в ControllerZero? $ scope. $ on ('handleBroadcast', function () {$ scope.message = sharedService.message;});
ZooZ 17 дек. 2015, в 08:22
0

Представленное видео действительно потрясающее! Мне кажется, это то, что мне нужно, чтобы запросить состояние другого контроллера от другого контроллера. Однако это не работает с использованием функции «invoke». Работает с использованием действия «триггер». Таким образом, если контроллер выполняет действие и имеет новое состояние, он должен будет транслировать это состояние, и другие контроллеры должны прослушивать эту трансляцию и отвечать соответствующим образом. Или лучше выполнить действие в общем сервисе, а затем передать состояние. Пожалуйста, скажите мне, если мое понимание верно.
tarekahf 16 сен. 2016, в 15:53
0

Правильно, ты понял!
adardesign 18 сен. 2016, в 18:29

Показать ещё 4 комментария

51

Ниже приведен пример одной страницы двух контроллеров, которые используют данные службы:

<!doctype html>
<html ng-app="project">
<head>
    <title>Angular: Service example</title>
    <script src="http://code.angularjs.org/angular-1.0.1.js"></script>
    <script>
var projectModule = angular.module('project',[]);

projectModule.factory('theService', function() {  
    return {
        thing : {
            x : 100
        }
    };
});

function FirstCtrl($scope, theService) {
    $scope.thing = theService.thing;
    $scope.name = "First Controller";
}

function SecondCtrl($scope, theService) {   
    $scope.someThing = theService.thing; 
    $scope.name = "Second Controller!";
}
    </script>
</head>
<body>  
    <div ng-controller="FirstCtrl">
        <h2>{{name}}</h2>
        <input ng-model="thing.x"/>         
    </div>

    <div ng-controller="SecondCtrl">
        <h2>{{name}}</h2>
        <input ng-model="someThing.x"/>             
    </div>
</body>
</html>

Также здесь: https://gist.github.com/3595424

exclsr 02 сен. 2012, в 08:44

0

А если theService обновляет thing.x , то это изменение автоматически распространяется на <input> в FirstCtrl и SecondCtrl , верно? И можно также изменить thing.x напрямую через любой из <input> (правильно?).
KajMagnus 22 нояб. 2012, в 06:19
4

Да. Все сервисы Angular являются единичными приложениями, что означает, что существует только один экземпляр сервиса. Ссылка: docs.angularjs.org/guide/dev_guide.services.creating_services
exclsr 19 март 2013, в 23:20
0

Ссылка в моем предыдущем комментарии - 404, так что вот руководство по сервисам, которое сегодня отмечает, что сервисы заметок - одиночные: docs.angularjs.org/guide/services
exclsr 01 сен. 2014, в 22:52
0

Почему .x ? Там нет свойства .x на thing или что- someThing ?
CodyBugstein 30 окт. 2014, в 12:03
0

@ Извините, я не знаю, о чем вы спрашиваете. x является первым свойством theService.thing . thing и someThing в HTML-фрагменте фрагмента относятся к $scope.thing и $scope.someThing в коде контроллера. Когда theService.thing назначается двум переменным области действия, x становится свойством каждой из них. Это отвечает на ваш вопрос?
exclsr 30 окт. 2014, в 22:59
1

@exclsr Да! Извините, что пропустил это раньше
CodyBugstein 31 окт. 2014, в 05:50
3

Безусловно лучший пример, который я когда-либо видел в сети. Спасибо
Sevenearths 19 авг. 2015, в 09:34

Показать ещё 5 комментариев

42

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

$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>

Код углового кода

 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. Если второй контроллер является дочерним, вы можете использовать Child Parent

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

AngularJS поддерживает концепции "Разделение проблем" с использованием архитектуры сервисов. Службы являются функциями javascript и несут ответственность за выполнение только определенных задач. Это делает их индивидуальной сущностью поддерживаемой и проверяемой. Службы, используемые для инъекций с использованием метода Mackahnism 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 документам сервисов Singletons - каждый компонент, зависящий от службы, получает ссылку на единственный экземпляр, сгенерированный службой factory.

4.Kack of hack - с помощью angular.element()

Этот метод получает scope() от элемента методом Id/unique 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, и когда вы нажмете на текст, вы соответственно получите значения в консоли. Если вы нажмете на родительский контроллер, браузер будет передавать значение дочернего элемента и наоборот.

Shubham Nigam 17 июль 2015, в 07:30

30

Если вы хотите генерировать и транслировать события для обмена данными или функциями вызова через контроллеры, посмотрите на ссылку : и проверьте ответ zbynour (ответ с максимальным количеством голосов). Я цитирую его ответ!!!

Если область firstCtrl является родительской для области secondCtrl, ваш код должен работать, заменив $emit на $broadcast в firstCtrl:

function firstCtrl($scope){
    $scope.$broadcast('someEvent', [1,2,3]);
}

function secondCtrl($scope){
    $scope.$on('someEvent', function(event, mass) {console.log(mass)});
}

Если между вашими областями нет родительско-дочернего отношения, вы можете ввести $rootScope в контроллер и передать событие всем дочерним областям (т.е. также secondCtrl).

function firstCtrl($rootScope){
    $rootScope.$broadcast('someEvent', [1,2,3]);
}

Наконец, когда вам нужно отправить событие из дочернего контроллера в область вверх, вы можете использовать $scope. $emit. Если область firstCtrl является родительской для области secondCtrl:

function firstCtrl($scope){
    $scope.$on('someEvent', function(event, data) { console.log(data); });
}

function secondCtrl($scope){
    $scope.$emit('someEvent', [1,2,3]);
}

SharpCoder 15 окт. 2014, в 14:38

21

Еще две скрипки: (подход без обслуживания)

1) Для контроллера Parent-Child - использование $scope родительского контроллера для генерации/трансляции событий. http://jsfiddle.net/laan_sachin/jnj6y/

2) Используя $rootScope для несвязанных контроллеров. http://jsfiddle.net/VxafF/

DarkKnight 07 окт. 2012, в 18:38

0

В чем причина всей этой сложности с событиями? Почему бы не сделать что-то подобное? jsfiddle.net/jnj6y/32
Dfr 06 июнь 2013, в 18:50
0

Это зависит от того, какие отношения между родителем и ребенком являются правильными. Это может быть иерархия DOM, если события в случае позволят вам отделить вещи.
DarkKnight 21 июнь 2013, в 06:14

16

Фактически использование emit и broadcast неэффективно, потому что событие пузырится вверх и вниз по иерархии областей, которые могут легко деградировать в пакет производительности для сложного приложения.

Я бы предложил использовать сервис. Вот как я недавно реализовал его в одном из моих проектов - https://gist.github.com/3384419.

Основная идея - зарегистрировать шину pub-sub/event в качестве сервиса. Затем введите эту шину событий, когда вам нужно подписаться или опубликовать события/темы.

numan salati 18 авг. 2012, в 05:54

5

звучит многообещающе, но ссылка не рабочая
Russ Jackson 03 дек. 2015, в 21:58

3

Я не знаю, если это не соответствует стандартам, но если у вас есть все ваши контроллеры в одном файле, вы можете сделать что-то вроде этого:

app = angular.module('dashboardBuzzAdmin', ['ngResource', 'ui.bootstrap']);

var indicatorsCtrl;
var perdiosCtrl;
var finesCtrl;

app.controller('IndicatorsCtrl', ['$scope', '$http', function ($scope, $http) {
  indicatorsCtrl = this;
  this.updateCharts = function () {
    finesCtrl.updateChart();
    periodsCtrl.updateChart();
  };
}]);

app.controller('periodsCtrl', ['$scope', '$http', function ($scope, $http) {
  periodsCtrl = this;
  this.updateChart = function() {...}
}]);

app.controller('FinesCtrl', ['$scope', '$http', function ($scope, $http) {
  finesCtrl = this;
  this.updateChart = function() {...}
}]);

Как вы можете видеть, индикаторыCtrl вызывает функции updateChart других обоих контроллеров при вызове updateCharts.

tomascharad 20 окт. 2014, в 14:42

3

Я также знаю об этом.

angular.element($('#__userProfile')).scope().close();

Но я не слишком сильно его использую, потому что мне не нравится использовать селектора jQuery в коде angular.

Andrey Korchak 16 июль 2013, в 14:20

0

лучший ответ. Так просто и легко ... =)
zVictor 05 авг. 2014, в 12:28
2

@zVictor, это действительно подход «последней инстанции». Это работает, но выходит за рамки возможного, чтобы заставить вас вернуться обратно. Это использование DOM-манипуляции, чтобы заставить что-то сделать, а не делать это программно. Это просто, это работает, но это не масштабируется.
Brian Noah 11 авг. 2014, в 21:14
0

@BrianNoah, правда. Можно использовать этот код для прототипов или экспериментов, но не для производственного кода.
Andrey Korchak 12 авг. 2014, в 08:03
1

Это худшее, что можно сделать. Манипулирование DOM в сервисах и прямой доступ к области.
Mattia Franchetto 11 март 2015, в 08:42

Показать ещё 2 комментария

2

Существует метод, не зависящий от служб, $broadcast или $emit. Он не подходит во всех случаях, но если у вас есть два связанных контроллера, которые могут быть абстрагированы в директивы, вы можете использовать опцию require в определении директивы. Скорее всего, это взаимодействие ngModel и ngForm. Вы можете использовать это для связи между директивными контроллерами, которые либо вложены, либо в один и тот же элемент.

Для ситуации с родителем/ребенком использование будет следующим:

<div parent-directive>
  <div inner-directive></div>
</div>

И основные моменты, чтобы заставить его работать: в родительской директиве с помощью методов, которые нужно вызывать, вы должны определить их на this (не на $scope):

controller: function($scope) {
  this.publicMethodOnParentDirective = function() {
    // Do something
  }
}

В определении дочерней директивы вы можете использовать опцию require, чтобы родительский контроллер был передан функции ссылки (чтобы затем вы могли вызывать функции на ней из scope дочерней директивы.

require: '^parentDirective',
template: '<span ng-click="onClick()">Click on this to call parent directive</span>',
link: function link(scope, iElement, iAttrs, parentController) {
  scope.onClick = function() {
    parentController.publicMethodOnParentDirective();
  }
}

Вышеуказанное можно увидеть на http://plnkr.co/edit/poeq460VmQER8Gl9w8Oz?p=preview

Аналогично используется директива sibling, но обе директивы одного элемента:

<div directive1 directive2>
</div>

Используется при создании метода на directive1:

controller: function($scope) {
  this.publicMethod = function() {
    // Do something
  }
}

И в директиве2 это можно вызвать с помощью опции require, которая приводит к тому, что siblingController передается функции ссылки:

require: 'directive1',
template: '<span ng-click="onClick()">Click on this to call sibling directive1</span>',
link: function link(scope, iElement, iAttrs, siblingController) {
  scope.onClick = function() {
    siblingController.publicMethod();
  }
}

Это можно увидеть на http://plnkr.co/edit/MUD2snf9zvadfnDXq85w?p=preview.

Использование этого?

Родитель: Любой случай, когда дочерние элементы должны "регистрироваться" с родителем. Очень похоже на отношения между ngModel и ngForm. Они могут добавить определенное поведение, которое может повлиять на модели. Возможно, у вас есть что-то чисто DOM, где родительский элемент должен управлять позициями определенных детей, например, управлять или реагировать на прокрутку.
Sibling: позволяет директиве изменять свое поведение. ngModel - классический случай, чтобы добавить парсеров/валидацию к использованию ngModel на входах.

Michal Charemza 27 дек. 2013, в 13:55

1

В angular 1.5 это можно сделать, выполнив следующие действия:

(function() {
  'use strict';

  angular
    .module('app')
    .component('parentComponent',{
      bindings: {},
      templateUrl: '/templates/products/product.html',
      controller: 'ProductCtrl as vm'
    });

  angular
    .module('app')
    .controller('ProductCtrl', ProductCtrl);

  function ProductCtrl() {
    var vm = this;
    vm.openAccordion = false;

    // Capture stuff from each of the product forms
    vm.productForms = [{}];

    vm.addNewForm = function() {
      vm.productForms.push({});
    }
  }

}());

Это родительский компонент. В этом я создал функцию, которая подталкивает другой объект в мой массив productForms - примечание - это только мой пример, эта функция может быть чем-то действительно.

Теперь мы можем создать еще один компонент, который будет использовать require:

(function() {
  'use strict';

  angular
    .module('app')
    .component('childComponent', {
      bindings: {},
      require: {
        parent: '^parentComponent'
      },
      templateUrl: '/templates/products/product-form.html',
      controller: 'ProductFormCtrl as vm'
    });

  angular
    .module('app')
    .controller('ProductFormCtrl', ProductFormCtrl);

  function ProductFormCtrl() {
    var vm = this;

    // Initialization - make use of the parent controllers function
    vm.$onInit = function() {
      vm.addNewForm = vm.parent.addNewForm;
    };  
  }

}());

Здесь дочерний компонент создает ссылку на родительскую компонентную функцию addNewForm, которая затем может быть привязана к HTML и называется как любая другая функция.

Katana24 23 март 2016, в 17:34

1

Вы можете ввести службу $controller в свой родительский контроллер (MessageCtrl), а затем создать/ввести дочерний контроллер (DateCtrl), используя:
$scope.childController = $controller('childController', { $scope: $scope.$new() });

Теперь вы можете получить доступ к данным из вашего дочернего контроллера, вызвав его методы, поскольку это служба.
Дайте мне знать, если возникнут какие-либо проблемы.

Smrutiranjan Sahu 16 апр. 2015, в 20:34

1

Ниже приведен подход publish-subscribe, который независимо от Angular JS.

Контроллер параметров поиска

//Note: Multiple entities publish the same event
regionButtonClicked: function () 
{
        EM.fireEvent('onSearchParamSelectedEvent', 'region');
},

plantButtonClicked: function () 
{
        EM.fireEvent('onSearchParamSelectedEvent', 'plant');
},

Контроллер выбора поиска

//Note: It subscribes for the 'onSearchParamSelectedEvent' published by the Search Param Controller
localSubscribe: function () {
        EM.on('onSearchParamSelectedEvent', this.loadChoicesView, this);

});


loadChoicesView: function (e) {

        //Get the entity name from eData attribute which was set in the event manager
        var entity = $(e.target).attr('eData');

        console.log(entity);

        currentSelectedEntity = entity;
        if (entity == 'region') {
            $('.getvalue').hide();
            this.loadRegionsView();
            this.collapseEntities();
        }
        else if (entity == 'plant') {
            $('.getvalue').hide();
            this.loadPlantsView();
            this.collapseEntities();
        }


});

Диспетчер событий

myBase.EventManager = {

    eventArray:new Array(),


    on: function(event, handler, exchangeId) {
        var idArray;
        if (this.eventArray[event] == null) {
            idArray = new Array();
        } else { 
            idArray = this.eventArray[event];
        }
        idArray.push(exchangeId);
        this.eventArray[event] = idArray;

        //Binding using jQuery
        $(exchangeId).bind(event, handler);
    },

    un: function(event, handler, exchangeId) {

        if (this.eventArray[event] != null) {
            var idArray = this.eventArray[event];
            idArray.pop(exchangeId);
            this.eventArray[event] = idArray;

            $(exchangeId).unbind(event, handler);
        }
    },

    fireEvent: function(event, info) {
        var ids = this.eventArray[event];

        for (idindex = 0; idindex < ids.length; idindex++) {
            if (ids[idindex]) {

                //Add attribute eData
                $(ids[idindex]).attr('eData', info);
                $(ids[idindex]).trigger(event);
            }
        }
    }
};

Global

var EM = myBase.EventManager;

Lijo 21 фев. 2014, в 14:19

Ещё вопросы

В этой теме группы Google, groups.google.com/d/topic/angular/m_mn-8gnNt4/discussion , обсуждаются 5 способов взаимодействия контроллеров друг с другом.
Здесь уже есть хорошие ответы, поэтому я просто хотел бы отметить, что для конкретного упомянутого варианта использования, возможно, лучшим решением будет фильтр AngularJS? Просто подумал, что упомяну это :)
Вышеуказанная скрипка и видео совместно используют сервис. Вот скрипка, которая использует $ scope. $ Emit : jsfiddle.net/VxafF
@adardesign: Я ЛЮБЛЮ читать тот же краткий и содержательный пример для директив (спасибо за этот ответ тоже!)
Отличный ответ, я использую myModule.service ('mySharedService', функция ($ rootScope) {}) вместо myModule.factory, но, тем не менее, работает!
Отлично. Однако у меня есть вопрос: почему вы добавили обработчик в ControllerZero? $ scope. $ on ('handleBroadcast', function () {$ scope.message = sharedService.message;});
Представленное видео действительно потрясающее! Мне кажется, это то, что мне нужно, чтобы запросить состояние другого контроллера от другого контроллера. Однако это не работает с использованием функции «invoke». Работает с использованием действия «триггер». Таким образом, если контроллер выполняет действие и имеет новое состояние, он должен будет транслировать это состояние, и другие контроллеры должны прослушивать эту трансляцию и отвечать соответствующим образом. Или лучше выполнить действие в общем сервисе, а затем передать состояние. Пожалуйста, скажите мне, если мое понимание верно.
А если theService обновляет thing.x , то это изменение автоматически распространяется на <input> в FirstCtrl и SecondCtrl , верно? И можно также изменить thing.x напрямую через любой из <input> (правильно?).
Да. Все сервисы Angular являются единичными приложениями, что означает, что существует только один экземпляр сервиса. Ссылка: docs.angularjs.org/guide/dev_guide.services.creating_services
Ссылка в моем предыдущем комментарии - 404, так что вот руководство по сервисам, которое сегодня отмечает, что сервисы заметок - одиночные: docs.angularjs.org/guide/services
Почему .x ? Там нет свойства .x на thing или что- someThing ?
@ Извините, я не знаю, о чем вы спрашиваете. x является первым свойством theService.thing . thing и someThing в HTML-фрагменте фрагмента относятся к $scope.thing и $scope.someThing в коде контроллера. Когда theService.thing назначается двум переменным области действия, x становится свойством каждой из них. Это отвечает на ваш вопрос?
@exclsr Да! Извините, что пропустил это раньше
Безусловно лучший пример, который я когда-либо видел в сети. Спасибо
В чем причина всей этой сложности с событиями? Почему бы не сделать что-то подобное? jsfiddle.net/jnj6y/32
Это зависит от того, какие отношения между родителем и ребенком являются правильными. Это может быть иерархия DOM, если события в случае позволят вам отделить вещи.
звучит многообещающе, но ссылка не рабочая
лучший ответ. Так просто и легко ... =)
@zVictor, это действительно подход «последней инстанции». Это работает, но выходит за рамки возможного, чтобы заставить вас вернуться обратно. Это использование DOM-манипуляции, чтобы заставить что-то сделать, а не делать это программно. Это просто, это работает, но это не масштабируется.
@BrianNoah, правда. Можно использовать этот код для прототипов или экспериментов, но не для производственного кода.
Это худшее, что можно сделать. Манипулирование DOM в сервисах и прямой доступ к области.

Vojta · Accepted Answer · 2012-02-23T06-54-00.000Z

633

Лучший ответ

Существует несколько способов взаимодействия между контроллерами.

Лучшим из них является, возможно, совместное использование сервиса:

function FirstController(someDataService) 
{
  // use the data service, bind to template...
  // or call methods on someDataService to send a request to server
}

function SecondController(someDataService) 
{
  // has a reference to the same instance of the service
  // so if the service updates state for example, this controller knows about it
}

Другой способ - испускать событие в области видимости:

function FirstController($scope) 
{
  $scope.$on('someEvent', function(event, args) {});
  // another controller or even directive
}

function SecondController($scope) 
{
  $scope.$emit('someEvent', args);
}

В обоих случаях вы также можете общаться с любой директивой.

Vojta 23 фев. 2012, в 06:54

4

Hia, первый пример потребовал бы, чтобы веб-страница знала обо всех сервисах в стеке. Что похоже на неприятный запах (?). Как и во втором, разве веб-странице не нужно предоставлять аргумент $ scope?
BanksySan 12 март 2012, в 17:02
53

Какие? Зачем? Все контроллеры вводятся DI Angular.
Vojta 12 март 2012, в 19:43
4

@ Vojta КАК один контроллер получает уведомление о том, что другой контроллер обновил службу? Есть ли у сервиса какой-то доступ к области? Служба запускает события, которые контроллеры слушают? Вот вопросы, которые у меня возникли, когда я смотрел на этот ответ, а затем пытался его реализовать. Но, эй, только я, похоже, что большинство людей, ваш ответ был очень полезным :)
Josh Noe 30 июль 2013, в 03:46
7

@JoshNoe в 1 / у вас есть два контроллера (или больше), и они оба получают один идентичный / общий сервис. Затем у вас есть несколько способов общения, некоторые из которых вы упомянули. Я бы решил на основе вашего конкретного случая использования. Вы можете поместить общую логику / состояние в службу, и оба контроллера только делегируют эту службу или даже экспортируют службу в шаблон. Конечно, служба также может инициировать события ...
Vojta 22 авг. 2013, в 19:14
0

stackoverflow.com/questions/19066567/...
Prashobh 29 сен. 2013, в 08:18
0

Даже излучение / прослушивание работает как шарм.
DrHall 20 янв. 2014, в 20:42
0

@ Войта я бы пошел прямо в сервис. Это позволяет мне проводить меньше мероприятий и получать удовольствие от разработки, основанной исключительно на данных;).
Omar Al-Ithawi 25 янв. 2014, в 12:03
136

Приходите к этому поздно: вы, ребята, знаете, что спорите с THE Vojta из Google, который работает над AngularJS, верно? :)
Suman 20 март 2014, в 20:54
16

Для меня не было очевидным, что в моем HTML контроллер, генерирующий события, должен быть дочерним узлом контроллера прослушивания, чтобы он работал.
djangonaut 18 май 2014, в 05:19
4

Более подробное описание механизма событий: stackoverflow.com/questions/14502006/…
Raman 21 май 2014, в 02:02
1

@ Суман, ты меня побил.
David Gilbertson 27 май 2014, в 23:18
0

СОБЫТИЯ работают только тогда, когда оба экземпляра контроллера активны во время передачи события. Возьмем, к примеру, вы хотите общаться между двумя контроллерами по разному маршруту ngRoute (у них есть отдельные времена жизни). Пользователь нажимает что-то в первом представлении. Контроллер 1 будет излучать / транслировать событие), затем запускается маршрутизация для загрузки нового представления, и этот контроллер 2 должен затем прослушивать это событие. AFAIK, эта модель коммуникации события не будет работать в таком сценарии. Оба контроллера должны работать одновременно.
Robert Koritnik 25 авг. 2014, в 21:08
0

Не работает для меня Я подключил поле drag-content к атрибуту области. Он работает, устанавливая значение true / false вручную в коде контроллера, но когда функции прослушивателя событий устанавливают значение, никакие изменения не передаются в меню.
El Dude 02 сен. 2014, в 01:36
0

Что, если один контроллер, которому нужны данные от второго контроллера, вызывается перед выполнением второго контроллера?
Eugene 09 сен. 2014, в 07:14
0

Вы сказали: «Вы также можете общаться с любой директивой», я думаю, что это не очень хорошо работает с директивами, так как большинство из них используют изолированную область видимости и не могут участвовать в $ emits контроллера
psp 13 окт. 2014, в 07:01
2

Мне не хватало некоторых знаний об иерархии контроллеров, чтобы использовать метод $ on / $ emit @ Vojta. В итоге мне пришлось использовать $ scope.broadcast вместо $ scope.emit. Смотрите этот ответ: stackoverflow.com/questions/14502006/…
Fitter Man 19 фев. 2015, в 17:54
0

Рекомендуется ли использовать $ emit или $ broadcast ??? я думаю, что это вызовет ненужных слушателей $$, любой способ избежать этого ??
sheelpriy 26 июнь 2015, в 06:41
0

Возможно ли это сделать без использования $ scope?
Ya. 29 июль 2015, в 14:47
0

Использование трансляции понятно и имеет смысл ..
Abdul Mannan 28 март 2016, в 11:46
0

Можно ли использовать этот метод без функции function FirstController ($ scope) и функции SecondController ($ scope)? Например, я могу вызвать $ scope.emit () в обратном вызове другого $ scope.on? То есть я хочу, чтобы этот обратный вызов отправлял событие другому контроллеру, чтобы что-то сделать.
ArtforLife 08 май 2016, в 03:02
0

Это не будет работать, если первый контроллер основан на маршруте, его необходимо выполнить перед вызовом второго контроллера. Следовательно, это не слабо связано.
STEEL 27 сен. 2016, в 07:08
0

Рад был помочь !
Shoukat Mirza 16 май 2017, в 15:48
0

Ссылка @Raman была абсурдно разъясняющей для меня. Спасибо!
Edson Horacio Junior 27 апр. 2018, в 18:06

Показать ещё 21 комментарий