Monitoring changes within a factory

Hey there! I've got this shared_service factory that's being used by my menu and other elements on the page.

angular.module('shared_service', []).
    factory('Shared', function($scope){
        var shared_service = {
            something: 'something',
            something_else: 'something_else'
        };

        //I'm looking to set up a watcher for 'something' in order to update 'something_else'
        //$scope.$watch('shared_service.something', function(){
        //    something_else += 1;
        //}
        return shared_service;
});

I know I could potentially attach the watcher in a controller, but personally, I feel like it belongs here. Do you think it's feasible to have it here?

Appreciate any advice or input you might have. Thanks!

javascriptangularjs

Answer №1

If you want to monitor changes in the application, you can use $watch on the $rootScope. However, since it's not within a controller, you must watch the return value of a function. Here is an example implementation:

angular.module('shared_service', []).
  factory('Shared', function($rootScope){
    var shared_service = {
        something: 'something',
        something_else: 'something_else'
    };

    $rootScope.$watch(function() {
      return shared_service.something;
    }, function () {
             shared_service.something_else = shared_service.something_else + 1;
    });
    return shared_service;
  });

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

JS: Initiating a new keypress operation

When I press the Tab key, I want it to do something different instead of its default action. Specifically, I have a text box selected and I would like it to add spaces (essentially making the textarea behave like a text editor). How can I trigger this type ...

javascriptjqueryhtml

The div layer is positioned above the flash object

I have successfully implemented a method where I position a div over a webpage containing a flash object. This absolutely positioned div has a high z-index and captures click events. The main goal is to trigger the click event on the div when the flash obj ...

javascriptjqueryflashfirefox

Having issues when dynamically adding options to a multiselect dropdown

I'm working on dynamically adding options to a multiselect using AJAX: <select size='2' name="CraftCode" id=@ccrf class="form-control js-select manualentrydd" ></select> $.ajax({ type: "GET", url: "GetCraftCodes", data: ...

javascriptjqueryhtmlajaxmulti-select

Is there a way to send JSON using ExpressJS in UTF-8 encoding?

Currently facing an issue with my new web app that I haven't encountered in the past. Experimenting with a simple code snippet like this: var jsonToSend = {hello: "woørld"}; app.get('/someUrl', function(req, res) { res.setHeader('Co ...

javascriptjsonexpressencodingutf-8

What is the reason for function expressions being hoisted when called within Express JS middleware?

It's common knowledge that function declarations are hoisted, allowing them to be called from anywhere in your script. However, this is not the case for function expressions. For instance: test(); const test = () => { console.log(1+3); } ...

javascriptnode.jsexpress

Experiencing a surge in requests with LazyLoad enabled?

My website contains numerous images, most of which are displayed within a slider using SlickSlider.js with Lazyload. Although the page load time is 3.87 seconds, there are over 134 requests being made for these images. Upon closer inspection, I noticed th ...

javascriptjqueryhttprequestslick.js

Issue: NG04002 encountered post migration from Angular to Angular Universal

Having recently created a new Angular app and converted it to Angular Universal, I encountered an issue when running the project using npm run dev:ssr. The error displayed in the terminal is as follows: ERROR Error: Uncaught (in promise): Error: NG04002 Er ...

javascriptangulartypescriptserver-side-renderingangular-universal

The attempt to create the maq module was unsuccessful

I've hit a roadblock and can't seem to identify what I'm doing incorrectly in this code snippet. //app.js 'use strict'; var app = angular.module('maq', [ 'ui.router', 'maq.home.controller' ]).ru ...

angularjs

The button's color cannot be modified due to a malfunctioning event script that is not

Seeking an explanation for why my current implementation isn't working. I'm attempting to create a quiz with a multiple choice section where the correct answer turns green when clicked, and incorrect answers turn red. Despite validating the code ...

javascripthtmlcss

In what way does the map assign the new value in this scenario?

I have an array named this.list and the goal is to iterate over its items and assign new values to them: this.list = this.list.map(item => { if (item.id === target.id) { item.dataX = parseFloat(target.getAttribute('data-x')) item.da ...

javascript

Combining numerous objects into one object within an array, each with distinct keys, and displaying them using FlatList

I'm struggling to present this information in a FlatList. Array [ Object { "-N1gqvHXUi2LLGdtIumv": Object { "Message": "Aeaaeaea", "Message_CreatedAt": 1652167522975, "Message_by_Ema ...

javascriptreactjsjsonreact-nativeobject

Scrolling to does not function properly with Material UI tabs

Looking for a solution to scroll to a specific div when clicking on a tab in Material UI Tabs using UseRef and ScrollTo. Check out the sandbox link here: https://codesandbox.io/s/exciting-sound-mrw2v Currently, when I click on Tab 2, I expect it to autom ...

javascriptcssreactjsmaterial-ui

Utilizing a different file to arrange and establish state

In a separate file called Origin.js, I have some data (objects) stored. This data is exported using the spread operator within an object named OriginState: Origin.js //info const info = { title: '', year: '', }; //images const ...

javascriptreactjsstate

Troubleshooting: Issues with AngularJS $route.reload() functionality

I have an angular app and I'm attempting to refresh the page. I've tried using $route.reload() as recommended in multiple posts, but I can't seem to get it to work (Chrome is showing me an error). Here's my controller: var app = angula ...

javascriptangularjstwitter-bootstrap

What is the process of invoking Link manually in React-router?

I am working on a component that is passed a <Link/> object from react-router as a prop. When the user clicks on a 'next' button within this component, I need to manually trigger the <Link/> object. Currently, I am using refs to acce ...

javascriptreactjsreact-router

In AngularJS, the use of the '+' operator is causing concatenation instead of addition

Looking for assistance with my TypeScript code where I've created a basic calculator. Everything is working as expected except for addition, which seems to be concatenating the numbers instead of adding them together. HTML CODE : <input type="tex ...

javascriptangulartypescriptconcatenation

Creating a new Express JS application

I've encountered an issue with my express application. When I run the server and navigate to localhost in my browser, the index page loads but without the image that should be displayed. The browser console shows a 404 error for the image URL. GET ht ...

javascriptexpress

Mastering the Art of Unit Testing with Angular Extensions

I am currently working with a controller that uses angular extend. How can I go about testing angular extend in this scenario? angular.module('conditionmonitor').controller('mapController', ['$scope', '$http', &apo ...

angularjsunit-testingkarma-mocha

Enhancing search engine optimization (SEO) for AngularJS utilizing the HTML5 url mode within Express

Up to now, I've utilized prerender.io to optimize the SEO of my angularjs websites. It has worked fine with urls containing hashbangs (website.com/#!). Currently, I am transitioning my websites to html5mode, which produces cleaner urls without hashba ...

angularjsnode.jsexpressseohtml5mode

When trying to gather multiple parameters using @Param in a NestJS controller, the retrieved values turn out

Can someone help me understand why I am struggling to retrieve parameters using the @Param() decorators in my NestJS controller? These decorators are defined in both the @Controller() decorator argument and the @Get() argument. I am relatively new to Nest ...

javascriptnode.jstypescriptexpressnestjs