Listening for events with $rootScope.$on inside a service or factory

Question

Listening for events with $rootScope.$on inside a service or factory

I'm encountering a peculiar issue with the $rootScope.$on method within a service or Factory.

Here's an example of the service:

app.service('testService', function($rootScope){

this.var1 = 5;

this.change = function(n){
    this.var1 = n;
}

$rootScope.$on('service', function(event, n){
    //this.var1 = n;
    console.log(this.var1);

});
});

The problem lies in the fact that it should display 5 in the console. However, I am unable to access the service's variables within the $rootScope.$on method...

Below is the corresponding controller:

app.controller( 'HelloCtrl', function($scope, testService, testFactory, $rootScope)
{
$scope.fromService = testService;

$rootScope.$broadcast("service", 12);
});

Here is the link to the JSFiddle showcasing the issue: jsFiddle

What could be the root cause of this problem?

Any suggestions on how to resolve this issue?

javascript angularjs

Answer 1

Answer №1

It is necessary to assign this to a new variable in order to create closure.

In the callback function, this refers to something else...

Here is an example that may assist you:

//example demonstrating difference between factory and service in angular.js
var app = angular.module('myApp', []);

app.service('testService', function($rootScope){

    var testService = this;

    this.var1 = 5;

    this.change = function(n){
        this.var1 = n;
    }

    $rootScope.$on('service', function(event, n){
        //this.var1 = n;
        console.log(testService.var1);

    });
});

app.controller( 'HelloCtrl', function($scope, testService, $rootScope)
{
    $scope.fromService = testService;

    $rootScope.$broadcast("service", 12);
});

http://jsfiddle.net/mc4ow2b6/4/

Answer 2

It is necessary to assign this to a new variable in order to create closure.

In the callback function, this refers to something else...

Here is an example that may assist you:

//example demonstrating difference between factory and service in angular.js
var app = angular.module('myApp', []);

app.service('testService', function($rootScope){

    var testService = this;

    this.var1 = 5;

    this.change = function(n){
        this.var1 = n;
    }

    $rootScope.$on('service', function(event, n){
        //this.var1 = n;
        console.log(testService.var1);

    });
});

app.controller( 'HelloCtrl', function($scope, testService, $rootScope)
{
    $scope.fromService = testService;

    $rootScope.$broadcast("service", 12);
});

http://jsfiddle.net/mc4ow2b6/4/

Listening for events with $rootScope.$on inside a service or factory

Answer №1

Similar questions

Locate the nested route within one of the child components in React Router that corresponds to a specific id

Within Angular2 NGmodule, I aim to dynamically load two distinct sets of route modules depending on certain conditions

Integrating draw2d into Mean.js: A Step-by-Step Guide

"MongoDB Aggregating Data with Nested Lookup and Grouping

AngularJS - Highlighted row value

Manually setting focus to input text in AngularJS: How it's done

Node.js and the Eternal Duo: Forever and Forever-Montior

Event cancellation for AngularJS UI-Grid filters

What is the best way to anchor the components to a specific location on the screen in ASP.NET?

What is the proper way to handle postMessage events from a Streamlit iframe within a Next.js app?

What causes data to update in a Vue template but not in the JavaScript portion of the code?

Perform time update every second

Implement a hover effect on a specific class targeting a nested element using JavaScript

What is preventing the buttons from filling the entire space of the parent element in this case?

The Angular bootstrap datepicker does not correctly format the date value stored in the ng-model variable

Interactive bar chart that updates in real-time using a combination of javascript, html, and

Removing unnecessary keys from intricate JSON data (with the use of pure JavaScript)

Leverage the power of Bootstrap by incorporating not one, but two carousels on a single page - one featuring a single item per

The onBlur attribute does not seem to be functioning properly under a specific condition

A guide on resolving the 'Unexpected identifier array in JSON Parse Error' encountered during an AJAX Request