Может ли один контроллер AngularJS вызвать другой?
Возможно ли, чтобы один контроллер использовал другой?
Например:
Этот документ 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 и доступ к услугам.
13 ответов
Существует несколько способов связи между контроллерами.
Лучшим, вероятно, является предоставление услуги:
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);
}
В обоих случаях вы можете общаться с любой директивой.
Смотрите эту скрипку: 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'];
Если вы хотите вызвать один контроллер в другой, доступны четыре метода
- $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' не будет вызывать внутри дочерних братьев и сестер, а будет вызывать только внутри родителя, где $ широковещательный вызов вызывается и внутри братьев и сестер, а также родителя. Это место, где производительность входит в действие. предпочтительнее, если вы используете связь между родителями и детьми, потому что она пропускает некоторые грязные проверки.
2. Если Второй контроллер дочерний, вы можете использовать связь Родитель-ребенок
Это один из лучших методов: если вы хотите установить связь между родителем и ребенком, когда ребенок хочет общаться с непосредственным родителем, тогда он не будет нуждаться в какой-либо трансляции $ или $ 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, и когда вы нажмете на текст, вы получите соответствующие значения в консоли. Если вы щелкнете по родительскому диапазону контроллеров, браузер отобразит значение дочернего элемента и наоборот.
Вот одностраничный пример двух контроллеров, совместно использующих данные сервиса:
<!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
Если вы хотите отправлять и транслировать события, чтобы обмениваться данными или вызывать функции между контроллерами, перейдите по этой ссылке: и проверьте ответ по 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]);
}
Еще две скрипки: (не сервисный подход)
1) Для контроллера "Родитель-ребенок" - Использование $scope родительского контроллера для передачи / трансляции событий. http://jsfiddle.net/laan_sachin/jnj6y/
2) Использование $rootScope через несвязанные контроллеры. http://jsfiddle.net/VxafF/
На самом деле использование emit и broadcast неэффективно, потому что событие всплывает вверх и вниз по иерархии областей действия, что может легко перерасти в снижение производительности для сложного приложения.
Я бы предложил использовать сервис. Вот как я недавно реализовал это в одном из моих проектов - https://gist.github.com/3384419.
Основная идея - зарегистрировать паб-саб / шину событий как сервис. Затем добавьте эту шину событий туда, где вам нужно подписаться или публиковать события / темы.
Я тоже знаю об этом.
angular.element($('#__userProfile')).scope().close();
Но я не использую его слишком часто, потому что мне не нравится использовать селекторы jQuery в угловом коде.
Вы можете внедрить службу '$controller' в свой родительский контроллер (MessageCtrl), а затем создать / внедрить дочерний контроллер (DateCtrl), используя:$scope.childController = $controller('childController', { $scope: $scope.$new() });
Теперь вы можете получить доступ к данным из вашего дочернего контроллера, вызывая его методы как сервис.
Дайте мне знать, если возникнет проблема.
Я не знаю, не соответствует ли это стандартам, но если у вас все ваши контроллеры в одном файле, вы можете сделать что-то вроде этого:
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() {...}
}]);
Как вы можете видеть, IndicatorsCtrl вызывает функции updateChart двух других контроллеров при вызове updateCharts.
Есть метод, не зависящий от услуг, $broadcast или же $emit, Это подходит не во всех случаях, но если у вас есть 2 связанных контроллера, которые можно абстрагировать в директивы, тогда вы можете использовать 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
Директива родственного брата используется аналогично, но обе директивы для одного и того же элемента:
<div directive1 directive2>
</div>
Используется при создании метода на directive1:
controller: function($scope) {
this.publicMethod = function() {
// Do something
}
}
И в директиве 2 это можно вызвать с помощью require опция, которая приводит к передаче siblingController в функцию link:
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, где родительский элемент должен управлять позициями определенных потомков, скажем, управлять прокруткой или реагировать на нее.
Брат, позволяющий директиве изменять свое поведение. ngModel - классический случай добавления парсеров / проверки к использованию ngModel на входах.
В версии 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 и вызываться как любая другая функция.
Следующее является 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);
}
}
}
};
Глобальный
var EM = myBase.EventManager;
Вы можете использовать $controller сервис, предоставляемый AngularJS.
angular.module('app',[]).controller('DateCtrl', ['$scope', function($scope){
$scope.currentDate = function(){
return "The current date is: " + new Date().toString();
}
}]);
angular.module('app').controller('MessageCtrl', ['$scope', function($scope){
angular.extend(this, $controller('DateCtrl', {
$scope: $scope
}));
$scope.messageWithDate = function(message){
return "'"+ message + "', " + $scope.currentDate;
}
$scope.action2 = function(){
console.log('Overridden in ChildCtrl action2');
}
}]);