Angularjs (1.6) sharing a function using $broadcast,$on?

Question

Is it possible to use $broadcast and $on/$emit to share a function in a component that exists inside its controller to a totally different controller under different component (see pic above)?. I have tried different examples from google, not sure what i am doing wrong . this is the function (inside the administration component in the picture ):

 refreshMarkers = (newMarkerSet) => {
        this.leafletData.getMap(this.mapId).then((map) =>  {
            if(this.previousLayer != null){
                this.$log.debug('removing map layer %o and adding %o', this.previousLayer, newMarkerSet);
                map.removeLayer(this.previousLayer);
                map.addLayer(newMarkerSet);
                this.previousLayer = newMarkerSet;
            }
        });
    };

inside a different controller which is inside a totaly different component (map-setting.controller.js in the picture ) i want to use that function like this:

  deleteAllZones = () => {
    let message = this.$filter('translate')('SI-MESSAGES.DELZONE-MSG');
    let title = this.$filter('translate')('SUBHEADER.DELZONE-TITLE');
    let button = this.$filter('translate')('BUTTON.DELETE');
    this.siAlertDialog.confirm(message, title, button).then(() => {
        this.deleteAllMapZones();
        this.refreshMarkers(); /////like this 
    })
};

everything is written in es6 and controllers are wraped in class and use a constructor . In case this matters

administration controller i am saying

 this.$rootScope.$on('refreshmap'),()=>{
      this.refreshmap()
  }

and in map-setting.controller.js

 notifyMap = () =>{
    this.$rootScope.$broadcast('refreshmap')
  }

function originally is in administration (ps. look at the picture)

There's no $broadcast or $emit in the code you've posted. See http://stackoverflow.com/help/mcve . Any way, this looks like a terrible idea. Scope events are for... events. Not for sharing behaviour between units. *share a function in a component that exists inside its controller to a totally different controller under different component* - this likely should be done with a service. — Estus Flask, Jun 28 '17 at 12:26
i was trying to get a clean code from the community, seen so many different setups for this. just would like to see if this is possible and how — jsPlayer, Jun 28 '17 at 14:17
It is possible to pass anything as scope event payload, including function. It shouldn't be done, because there are not so many good use cases for scope events design-wise, and this one clearly isn't one of them. It's not possible to say how, because it isn't clear what's wrong with your code. Please, provide MCVE. — Estus Flask, Jun 28 '17 at 14:27
Agree with comments above, you should be using a service for this, and managing state accordingly. Controller functions should be isolated to the scope of the controller. If you need to notify one controller that another controller has changes, consider an observer/listener pattern, redux, or use $broadcast and $on to notify the controller to call the service function. — Billy Baker, Jun 28 '17 at 15:58
Can i use rotoscope to achieve this? I might not ever use the function anywhere else. just wondering of any other option other than service — jsPlayer, Jun 28 '17 at 21:04
The AngularJS team does not recommend using `$rootScope` for sharing functions. See [AngularJS FAQ - $rootScope exists but it can be used for evil](https://docs.angularjs.org/misc/faq#-rootscope-exists-but-it-can-be-used-for-evil) — georgeawg, Jun 28 '17 at 21:16
i have updated the code to show what i was trying with broadcast and $on. if you guys can look. i understand service is better idea. Just want to see if this works :) — jsPlayer, Jun 28 '17 at 21:57

MaazKhan47 · Answer 1 · 2017-06-29T06:28:36.167

0

Share functions using service.

  app.Service('myService', function(){

      this.myFunc() {

            return 1;
      }

  })

Inject service in controller

  app.Controller('myCtrl', [ 'myService', function(myService) {

    myService.myFunc();

  }])

edited Jun 29 '17 at 06:28

answered Jun 28 '17 at 12:31

MaazKhan47

811
1
11
22

1

The question applies to AngularJS. Not Angular 2+. – Estus Flask Jun 28 '17 at 12:41
its an angalar 1.x question – jsPlayer Jun 28 '17 at 14:18
Edited as per Angular 1.x – MaazKhan47 Jun 28 '17 at 22:26

score 0 · Answer 2 · answered Jun 29 '17 at 16:23

Services are definitely the best answer to my question. But in case anyone wondering how it can be done with broadcast, on . here it is (not recommended by angular team)

so the controller where i execute the action

   notifyMap = () =>{
    this.$rootScope.$broadcast('refreshmap')
}

then this.notifyMap () //where ever i want to execute

listening//

 this.$scope.$on('refreshmap',()=>{
      console.log('recieved...............');
      this.refreshMarkers();
  })

thanks:)

Angularjs (1.6) sharing a function using $broadcast,$on?

2 Answers2