Endless cycle due to $digest in AngularJS

I recently encountered an issue with an infinite loop involving angularjs $q and promises. Here's the code in question:

<a ng-hide="!isTechnician()" class="pull-right" href="#/admin/techniciansState"><span
                                        class="glyphicon glyphicon-map-marker"></span>&nbsp; Estado del técnico &nbsp;
                                </a>

Upon further examination, I discovered this javascript code snippet:

$scope.isTechnician = function () {
        if (!$scope.notCheckTechnician) {
            SecurityService.getCurrentUser().then(function (user) {
                if ($.inArray('technician', user.roles)) {
                    return true;
                } else {
                    return false;
                }
            });
        }

    };

 var SecurityService = function($resource, $q, $rootScope, API_URL) {
     // REST service definition
     var Security = $resource(API_URL + '/security/:action', {
         action: "@action"
     }, {
         'currentUser': {
             method: 'GET',
             isArray: true,
             params: {
                 action: 'current-user'
             }
         }};
var getCurrentUser = function() {
             var deferred = $q.defer();
             var user = Security.currentUser(function() {
                 if (user.length > 0) {
                     _setCurrentUser(user[0]);
                     deferred.resolve(user[0]);
                 } else {
                     _setCurrentUser(null);
                     deferred.reject('Not authenticated');
                 }
             }, function() {
                 _setCurrentUser(null);
                 deferred.reject('Not authenticated');
             });
             return deferred.promise;
         };

But then came the error message:

Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting!
Watchers fired in the last 5 iterations: []
http://errors.angularjs.org/1.2.18/$rootScope/infdig?p0=10&p1=%5B%5D
    at http://localhost:900/bower_components/angular/angular.js:78:12
    at Scope.$get.Scope.$digest (http://localhost:900/bower_components/angular/angular.js:12434:19)
    at Scope.ng.config.$provide.decorator.$delegate.__proto__.$digest (<anonymous>:844:31)
    at Scope.$get.Scope.$apply (http://localhost:900/bower_components/angular/angular.js:12660:24)
    at Scope.ng.config.$provide.decorator.$delegate.__proto__.$apply (<anonymous>:855:30)
    at done (http://localhost:900/bower_components/angular/angular.js:8272:45)
    at completeRequest (http://localhost:900/bower_components/angular/angular.js:8477:7)
    at XMLHttpRequest.xhr.onreadystatechange (http://localhost:900/bower_components/angular/angular.js:8416:11) 

Curiously, I couldn't find any watchers in my controller. What could be causing this?

Answer №1

A display-none CSS property is applied during each rendering cycle. If your display-none logic includes database queries, it will continually trigger a rendering cycle leading to an endless loop.

To resolve this issue, separate the display logic from the data retrieval process for proper functionality.

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

Tips for sequentially calling multiple await functions within a for loop in Node.js when one await is dependent on the data from another await

I am currently facing a challenge where I need to call multiple awaits within a for loop, which according to the documentation can be performance heavy. I was considering using promise.all() to optimize this process. However, the issue I'm encounterin ...

Filtering data from Arduino using web serial communication

My setup consists of an Arduino kit connected to a webserial API that sends data to an HTML div identified by the id 'target'. Currently, all the data is being logged into one stream despite having multiple dials and switches on the Arduino. Th ...

Deleting a row from a table in AngularJS can be accomplished by following these steps

I am having trouble with deleting rows from a table using angularjs. When I try to delete a row, it ends up deleting the previous row instead of the correct one. How can I fix this issue? Please check out the working DEMO Here is the code snippet: < ...

JavaScript expression not being processed

What could be the reason behind not receiving the value for dish.price, dish,description, etc.? Where am I making a mistake in this code snippet? <!DOCTYPE html> <html lang="en" ng-app> <head> <meta charset="utf-8"> < ...

The Resharper guideline "Function Parameter" doesn't allow the usage of AngularJS service names

I have a question regarding naming conventions in my AngularJS app. Currently, all my service names start with an uppercase character. However, I am facing an issue where service parameters must match the service name, but Resharper's JavaScript "Func ...

What is the process for deducting the ordered quantity from the available quantity once an order is confirmed

Although I'm not a fan of hard coding, I've been struggling to find a solution to my problem and some explanations are just not clicking for me. The issue at hand involves three data products in the cart, product details, and placed order data f ...

router.query is returning an empty object when using Next.js

Here is how my folders are organized: https://i.stack.imgur.com/TfBtv.png In addition, here is a snippet of my code: const router = useRouter(); const { id } = router.query; The issue I'm facing is that the id is returning {} instead of the actual ...

Is there a way to ensure a function is only executed once whenever the page is refreshed?

I have the following code snippet: function myfunc () { alert('executed'); } $('.classname').on('click' function () { myfunc(); }); I am trying to ensure that myfunc is only executed once. I don't want it to ru ...

Obtain the contenteditable span's value

I'm facing an issue with a content editable span - I want to extract its value when the post button is clicked, but it's not working as expected. Please note that I am unable to convert the span to a textbox or div, I specifically need the value ...

"Injecting the value of a jQuery variable into a PHP variable

<script type="text/javascript"> $(document).ready(function(){ $("#t_select").change(function(){ var table_name = $("#t_select").val(); $.ajax({ type: 'POST', ...

Tips for dynamically populating a mat-table dataSource

While working with backend data streaming, I encountered an issue where trying to push an event to dataSource resulted in an error stating that dataSource is not defined. Can anyone provide guidance on how to dynamically add data to a materialize table? s ...

Display a DIV element when hovering over another DIV element using CSS or JavaScript without them being directly related as parent and

So I've figured out how to use CSS to show a hidden div when you hover over its parent. But what if the hidden div is not a child of the parent you want to hover on? How do you make it appear then? For example: <div class="field-1"></div> ...

Next JS Dynamic Routing displays successful message on invalid routes

I have been using the App Router feature in Next JS along with Strapi as my CMS. When I make a query to the API endpoint in Postman, I receive the expected results. Requests for routes without corresponding slugs return a 404 error, while only routes with ...

Ordering dates by week in AngularJS 1

Currently, I have a list of objects: [{ name: one, date: 2017-09-18 }, { name: two, date: 2017-09-11 }, { name: three, date: 2017-09-13 }] I am looking to organize this list by week. Perhaps like the following structure: { 1week(or , m ...

The nested jade elements are failing to render

If I have a jade setup with 3 files as follows: 1. //layout.jade doctype html html body block content 2. //index.jade extends layout block content h1 Animals block cat block dog 3. //animals.jade extends index block cat p Meow block ...

Remove the color options from the Material UI theme

Can certain color types be excluded from the MUI palette in MUI v5? For example, can background and error colors be removed, allowing only colors defined in a custom theme file to be used? I attempted using 'never' but it did not provide a solut ...

Issue with the Ajax auto-complete feature in Internet Explorer

I am facing an issue with my "ajax suggestion list" getting hidden behind the "select menu" located right below the text box that triggers the ajax function. This problem only occurs in IE 6.0, while it works fine in other browsers. I have already disabled ...

What is the best method for accessing and showcasing images in an ionic app?

Having trouble displaying images after executing the following command: ionic run ios The default ionicframework template is being used with the sidemenu, and no changes have been made to the app directory structure. An inline css is being used to speci ...

Create a function in JavaScript that is able to accept a variable number of objects as arguments

I have a good grasp of how to pass infinite parameters in a function in JavaScript. But what about accepting any number of objects as parameters in a function? This is my current implementation: function merge<T>(objA: T, objB: T){ return Object. ...

Using Router.back in Next.js triggers a complete page refresh

I am working on a page called pages/conversations/[id].tsx, and here is the code: import Router, { useRouter } from 'next/router' export default function ConversationPage() { const router = useRouter() ... return ( <View ...