update the variables based on the changes in the service

I have developed a service in my application to retrieve configuration settings from the database. This service is used to display various configurations across different parts of the app. However, I am encountering an issue where the variables do not update on the configs page until I manually refresh the page.

THE SERVICE:

app.factory('dataShare', function($rootScope, $log, $q, $http, Data) {

  var configs= {};

      configs.getconfigs=function(){

        var deferred = $q.defer();

        Data.get('config').then(function(data){

          deferred.resolve(data.data);

        });

          return deferred.promise;

      }

    return configs;

});

THE CONTROLLER:

app.controller('authCtrl', function ($scope, $rootScope, $routeParams, $log, $location, $http, dataShare) {
  dataShare.getconfigs().then(function(data){
    $scope.configs = data;
  });
});

HTML SNIPPET:

<div class="col-md-2"><span ng-if="configs[0].button_name"><a class="btn btn-sm btn-info navbar-btn" ng-href="{{configs[0].button_url}}">{{configs[0].button_name}}</a></span></div>

Any assistance or advice on this issue would be greatly appreciated.

Answer №1

To ensure updates on the "config" object, you can set a "Watch" on it within the configuration process. After initializing the "config" object, register it with the watch service in the following way: $scope.config={}; $scope.$watch('config', function() { alert('Config has been updated'); //Perform actions upon updating config }); //Service call

For more information, visit https://docs.angularjs.org/api/ng/type/$rootScope.Scope

UPDATE : Upon further review of the issue, if the problem lies in the view not reflecting the model's updates even after modification, utilize the $apply method:

dataShare.getconfigs().then(function(data){
    $scope.configs = data;
    $scope.$apply();
  });

This will prompt the angular view to show the recent changes in the model.

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

Troubleshooting problem with the oninput function of a custom JavaScript element

Assume I have a unique requirement to trigger a function within a custom element. The goal is to update text in the element only when a slider is moved within that specific element. Here's an example implementation in the main.js file: class Oninput ...

Can the parameters in a .slice() be customized within a v-for loop?

I am currently working with Laravel 8 and using blade syntax. The following code snippet is from a Vue component I created: <li class="w-3/12 md:w-auto pt-0 md:px-4 md:pt-2 md:pb-0 list-none relative" v-if="comic.item_type === 'b&ap ...

JavaScript - Retrieve events from an element and assign them to a keyboard button

I am currently curious about the following scenario: Suppose I have an element with a particular event. For example, when this element is clicked, it triggers alert('clicked); Now, my question is: Is there a way to capture the events of this element ...

Testing the scope of an Angular directive

Encountering an issue with the unit test In my code, I have: describe('test controller', function () { var =$compile, scope, rootScope; beforeEach(module('myApp')); beforeEach(inject(function (_$compile_, _$rootScope_) { ...

Troubleshooting base href issues in AngularJS routing

For a demonstration, I decided to try out this plunker from a tutorial that showcases tab routing across different pages. After downloading the entire zip file and running it as is (e.g. with all files in the same directory and utilizing CDN links), I enco ...

Verify the password by checking each character as you type

Currently, I am trying to implement a real-time password matching feature. Is there anyone who can provide me with the code that verifies whether the entered passwords match character by character as they are being typed, and also checks the length upon ...

Encountered an issue while implementing the post function in the REST API

Every time I attempt to utilize the post function for my express rest API, I encounter errors like the following. events.js:85 throw er; // Unhandled 'error' event ^ error: column "newuser" does not exist at Connection.parseE (/Use ...

Is the setInterval function in JavaScript only active when the browser is not being used?

I am looking for a way to ensure proper logout when the browser is inactive using the setInterval() function. Currently, setInterval stops counting when the browser is active, but resumes counting when the browser is idle. Is there a way to make setInterv ...

Is it possible to use tabs.create to generate a tab and then inject a content script, where the code attribute is effective but the file attribute seems to be ineffective

I am currently facing an issue with injecting a content script file into a newly created tab. The problem lies in the fact that I keep receiving an error stating chrome.tabs.executeScript(...) is undefined in the console output of the Popup. It may be wort ...

Implementing pagination with Django-REST and AngularJS

I successfully integrated my angularjs app with django-rest, but encountered a problem when implementing pagination. Below is the code for my restservice and controller: // restservices.js // API call for all images in an event services.factory('Imag ...

Mastering the placement of lights in ThreeJS

Struggling for nearly half an hour now, attempting to place a pointlight at the base of my model, but achieving dismal outcomes. Not sure of the dimensions of my model, and consistently failing to accurately pinpoint the light within the scene. Thought ab ...

Ui Bootstrap (angularjs) sidebar is not functioning properly

I am encountering an issue with a sidenav that I am in the process of creating for one of my projects. The goal is to develop a side menu that shifts the content to the right when opened and returns it to the left when closed, essentially functioning as a ...

Trying to modify the chosen option while filtering an ajax source using select2?

I am currently integrating the select2 library within a Bootstrap 4 modal in the following manner: <div class="form-group" id="fg-jbInd"> <label for="jbIndustry" class="control-label"gt;Industry * <sele ...

Display a message box in the external window just before the close event

I am trying to implement a message box that will appear when the user clicks the (X) button of an Ext window. However, I am facing an issue where the window closes before the message box is shown. Below is the code snippet I have written: var assignReport ...

Choosing all components except for one and its descendants

I am searching for a method to choose all elements except for one specific element and its descendant, which may contain various levels of children/grandchildren or more. What I'm trying to accomplish is something like... $("*").not(".foo, .foo *").b ...

What occurs when an npm module is removed from the repository?

I came across an interesting article discussing how the deletion of a popular npm package (left-pad) by its author led to the breaking of various apps. I am puzzled by this situation. Doesn't an npm package's code get locally downloaded when you ...

retrieving JSON data using ajax and processing it in PHP

I have some data that needs to be sent to the backend, and it looks like this: function view(){ let id = "12345678"; let profile = [{name:"dave", department : "Engineering"}, {name:"Tedd", ...

intl-tel-input's getExtension function is returning a value of 'null'

I've been attempting to retrieve the extension of the mobile number that has been input. All other variables are functioning correctly, but the extension variable is returning a null value. It appears that it is sending a null value to the POST method ...

Adjust the value of a JavaScript variable using Selenium

My dilemma involves a boolean JavaScript variable called foo, which is currently set to true but I need it changed to false. This particular variable has the advantage of having global scope. When using Selenium, what is the most effective method for alte ...

Get the file using jQuery ajax post request

Currently, I am attempting to export the data from my web page and download it as an Excel file. However, despite receiving a successful response, the download does not initiate. $.ajax({ type: "POST", url: _url, contentType: 'multi ...