J'ai essayé deux méthodes ici : 1. Utilisez le propre mécanisme d'événement d'Angular
.
(function() {
'use strict';
angular
.module('app.core')
.factory('eventService', eventService);
/* @ngInject */
function eventService(logger) {
var service = {
on_angular_event: on_angular_event,
trigger_angular_event: trigger_angular_event
};
return service;
function on_angular_event(scope, type, f) {
scope.$on(type, function(event, data){
f(data);
// 处理时间后阻止事件继续扩散
event.stopPropagation = true;
})
}
function trigger_angular_event(scope, deriction, type, data) {
// deriction: up, down, sibling
if (deriction === 'up') {
scope.$emit(type, data);
} else if (deriction === 'down'){
scope.$broadcast(type, data);
} else if (deriction === 'sibling'){
scope.$parent.$broadcast(type, data);
}
}
}
})();
Utilisé dans le contrôleur, ajoutez a pour envoyer une notification d'événement à b :
controller_A.$inject = [$scope, eventService];
function controller_A($scope, eventService) {
//send event
//direction 根据 A 和 B 的关系来定，父子用up或down，兄弟用sibling
eventService.trigger_angular_event($scope, direction, 'event_name', data);
}
controller_B.$inject = [$scope, eventService];
function controller_B($scope, eventService) {
// recv event from controller_A
eventService.on_angular_event($scope, 'event_name', function(data){
// do something here
});
}
2. Utilisez le service pour simuler des événements de rappel. L'essence est d'utiliser le service pour enregistrer une fonction de rappel globale à utiliser entre les contrôleurs
.
(function() {
'use strict';
angular
.module('app.core')
.factory('eventService', eventService);
/* @ngInject */
function eventService(logger) {
var onEventFunc = {};
var service = {
on: on,
trigger: trigger
};
return service;
function on(type, f) {
onEventFunc[type] = onEventFunc[type] || [];
var funcs = onEventFunc[type];
// Todo:同一个事件可以让不同的监听者监听，但是同一个监听者的回调只能注册一次。而回调函数多用匿名函数注册，此处用toString()进行区分，效率较低。
var exist = false;
for (var i = 0; i < funcs.length; i++) {
if (funcs[i].toString() === f.toString()) {
exist = true;
break;
};
};
if (!exist) {
funcs.push(f);
};
}
function trigger(type, data) {
//logger.info('trigger', data);
for (var item in onEventFunc) {
if (item === type) {
var funcs = onEventFunc[item];
for (var i = 0; i < funcs.length; i++) {
funcs[i](data);
};
}
}
}
}
})();
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
J'ai essayé deux méthodes ici :
.1. Utilisez le propre mécanisme d'événement d'Angular
Utilisé dans le contrôleur, ajoutez a pour envoyer une notification d'événement à b :
2. Utilisez le service pour simuler des événements de rappel. L'essence est d'utiliser le service pour enregistrer une fonction de rappel globale à utiliser entre les contrôleurs
.Hmm. Vous pouvez essayer des mécanismes de diffusion d'événements et de tunneling.
Vous pouvez jeter un œil à ceci
Pour être plus direct, vous pouvez essayer $broadcast et $on, mais l'efficacité sera médiocre
Voyant que ce qui est écrit ci-dessus n'est pas assez pur (mélangé à d'autres considérations), j'ajouterai une version pure.
Démo fournie
Le code est le suivant
1). Créez un bus d'événements pour gérer tous les événements de manière globale
2). Utilisez $broadcast et $emit