call $emit event from angular to angularJS (publish-subscribe pattern)

Question

I have a hybrid angular application tha uses both angularJS and angular 5.

I'm migrating a controller from angularJS to angular 5. This controller (let's call controller1) have the following code:

$rootScope.$emit('goToHomeEvent', 'Navigate to HomePage');

Then, I have another controller (let's call controller2) that subscribes the goToHomeEvent:

 $rootScope.$on('goToHomeEvent', function (event, data) {
            //Do some stuff
        });

My goal is to only migrate the controller1 to angular 5, mantaining the code of controller2 has it is, maintaining the ability to subscribe the goToHomeEvent event.

Any suggestions?

write a service with a method that emit an event an subscribe to it. — enno.void, Jun 14 '18 at 17:07

score 3 · Answer 1 · answered Jun 14 '18 at 17:08

I think that you could probably make usage of the localStorage for this as they dont't really communicate between each other.

I would suggest you to populate the localStorage on emit and watch it in the controller2. It's probably going to work although I don't know if it's the best approach for your problem.

score 2 · Accepted Answer · answered Jun 18 '18 at 15:58

The solution I came up is to create global functions and associate them to them to the window variable like this:

controller1:

$rootScope.$emit('goToHomeEvent', 'Navigate to HomePage');
window.goToHomeEvent(data);

controller2 (in angular 2+):

window["goToHomeEvent"] = fuction(data) {
    //do stuff here
}

score 0 · Answer 3 · answered Jun 18 '18 at 16:08

Our solution was a variation on the global. In the angularJS file at top level that calls .module('app').run(fn), we inject the $rootScope, $q, $injector, and $state and set them to a global var app (as opposed to directly onto the window object). So Angular2+ calls app.$rootscope.etc.

app.$q is effectively the browser's native/polyfilled Promise.resolve and related functions, so $q's replacement doesn't need to be injected into newer code.

app.$state is just for router concerns. Once you change over to Angular2's router, re-implement the parts of $state that you actually use in terms of the new router.

app.$injector is useful for a lot of oddball situations.

score 0 · Answer 4 · answered Jan 29 '19 at 17:24

0

i've solved by global function without emit/broadcast:

AngularJS:

$window.bridgeFormAngular = function (params)
  {
    console.log(params);
  }

Angular 7:

public sendToAngularJS(params: Object)
  {
    window["bridgeFormAngular"](params);
  }

answered Jan 29 '19 at 17:24

Simone Gosetto

21
1
5

Koen Meijer · Answer 5 · 2019-02-09T14:18:40.623

You can upgrade the $rootscope of angularjs and use it inside the Angular side of the hybrid.

You will have to follow the following steps:
1 - Register the '$rootScope' service as a provider inside Angular:

@NgModule({
  providers: [{
    provide: '$rootScope',
    useFactory: ($injector: any) => $injector.get('$rootScope'),
    deps: ['$injector']
  }]
})

2 - Use the $rootScope inside your Angular components or Services via injection:

constructor(@Inject('$rootScope') private _rootScope: any) {}

constructor(@Inject('$rootScope') private _rootScope: any) {}

call $emit event from angular to angularJS (publish-subscribe pattern)

5 Answers5