Transferring information about service events to a controller in Angular

Question

Transferring information about service events to a controller in Angular

I am facing an issue with some audio elements in my service that listen for the "ended" event. I am looking for a way to pass this message to an angular controller.

Currently, my service code looks like this:

Audio.addEventListener "ended", (->
      $rootScope.$broadcast("audioEnded")
    ), false

And in my controller, I have the following:

$scope.$on "audioEnded", ->
      console.log("ended scope")

While this solution works, I am exploring alternative methods of communication between services and controllers without relying on $rootScope.

javascript angularjs coffeescript angularjs-scope

Answer 1

Answer №1

To accomplish your goal, one effective method is to create an event aggregator as a service. This aggregator can be utilized in directives, controllers, or config functions through simple dependency injection.

app.service 'eventAggregator', ->
    handlers: []
    on: (eventName, handler) ->
       #register handler
    emit: (eventName, args...) ->
       #iterate events and call registered handlers

Here's an example of how to use it:

app.controller 'Ctrl', (eventAggregator) ->
    eventAggregator.on 'eventName', ->
        #...
    eventAggregator.emit 'eventName'

Answer 2

To accomplish your goal, one effective method is to create an event aggregator as a service. This aggregator can be utilized in directives, controllers, or config functions through simple dependency injection.

app.service 'eventAggregator', ->
    handlers: []
    on: (eventName, handler) ->
       #register handler
    emit: (eventName, args...) ->
       #iterate events and call registered handlers

Here's an example of how to use it:

app.controller 'Ctrl', (eventAggregator) ->
    eventAggregator.on 'eventName', ->
        #...
    eventAggregator.emit 'eventName'

Transferring information about service events to a controller in Angular

Answer №1

Similar questions

npm not working to install packages from the package.json file in the project

Update the text in a personalized dropdown menu when an option is chosen

Storing the subscription value retrieved from an API in a global variable

Having trouble accessing env variables from React Component in Next.js?

Building a dynamic webpage using AJAX, MVC, and web APIs to generate a div element filled

Switch between using a dropdownlist and textbox depending on the selection in another dropdownlist

Click event to focus on AngularJS TinyMCE textarea

Waiting for a promise to be returned in AngularJS

Having trouble with finding the correct object in an array of objects using indexOf and splice()?

Issue with Bootstrap.js causing mobile menu to not expand when toggled in Rails app

Is there a way for me to make my Note element automatically update whenever I modify its text content?

Retrieving information from MongoDB for a specific ObjectID associated with the current authenticated user

Encountering the issue of "TypeError: Cannot read property 'file' of undefined" when trying to upload a video with Multer

Surprisingly stumbled into the 'restricted' directory while switching the current directory to a temporary folder

Having trouble troubleshooting the jQuery button

Executing a file upload using ng-click="upload('files')" within Selenium Webdriver

I encountered an issue when attempting to execute an action as I received an error message indicating that the dispatch function was not

Utilizing Radio Buttons for Table Selection in a React Application

Is it possible to further simplify this piece of JavaScript using jQuery?

The request to http://localhost:3000/cartdata has encountered an internal server error (500) in the isAxiosError.js file at line