ng-class expressions are constantly evolving and adapting

Within a div, I am utilizing 

ng-class="{minifyClass: minifyCheck}"
.

In the controller, I monitor changes in two parameters - $window.outerHeight and 

$('#eventModal > .modal-dialog').height()
. If there are any changes, I trigger the minifyChange() function to execute certain tasks.

function minifyChange(){
    if( $('#eventModal > .modal-dialog').height()+75 < $window.outerHeight ){
        $scope.minifyCheck = true;
    }else{
        $scope.minifyCheck = false;
    }
    //$scope.$digest();
}


$scope.$watch(function () {
   return $('#eventModal > .modal-dialog').height()
},function(){ return minifyChange() }, true)

$scope.$watch(function () {
   return $window.outerHeight;
},function(){ return minifyChange() }, true)

If I leave out the $scope.$digest(), I must "wait" until the next $scope.$digest() or $scope.$apply() occurs for the addition or removal of minifyClass based on the value of minifyCheck. This waiting period can lead to suboptimal user experience.

However, omitting the $scope.$digest() will result in an error indicating that the $digest is already in progress:

Error: [$rootScope:inprog] http://docs.angularjs.org/error/$rootScope:inprog?p0=$digest

My Angular code is intricate, making it challenging to identify the ongoing digest. Here is the complete error message:

Error: [$rootScope:inprog] http://errors.angularjs.org/undefined/$rootScope/inprog?p0=%24digest
    at Error (<anonymous>)
    at http://localhost:8000/static/angular/angular.min.js:6:453
    at h (http://localhost:8000/static/angular/angular.min.js:93:109)
    at g.$digest (http://localhost:8000/static/angular/angular.min.js:96:74)
    at minifyChange (http://localhost:8000/e=52a1a39345dc83b057c17dc1#v1:444:12)
    at Object.fn (http://localhost:8000/e=52a1a39345dc83b057c17dc1#v1:450:22)
    at g.$digest (http://localhost:8000/static/angular/angular.min.js:96:367)
    at g.$apply (http://localhost:8000/static/angular/angular.min.js:99:100)
    at http://localhost:8000/static/angular/angular.min.js:17:320
    at Object.d [as invoke] (http://localhost:8000/static/angular/angular.min.js:30:21) angular.js:8058
(anonymous function) angular.js:8058
(anonymous function) angular.js:5730
g.$digest angular.js:9096
g.$apply angular.js:9363
(anonymous function) angular.js:1127
d angular.js:3146
Sb.c angular.js:1125
Sb angular.js:1140
Mc angular.js:1091
(anonymous function) angular.js:17902
l jquery-2.0.3.js:2913
c.fireWith jquery-2.0.3.js:3025
x.extend.ready jquery-2.0.3.js:398
S jquery-2.0.3.js:398

My query: Is there a way to update the class without triggering this error? Are there alternative Angular functions that could serve this purpose? Alternatively, if avoiding the use of $digest is impossible, how can I pinpoint and debug the concurrent digest process?

javascriptangularjs

Answer №1

It's always advisable to delegate DOM access tasks to directives rather than handling them in your controller. One effective approach is as follows:

Develop a directive that monitors element.height() and $window.height(). (You can refer to an example here). Additionally, check out How (not) to watch element size changes

Each time the watch function activates, calculate the minifyCheck value. Hopefully, this guidance proves helpful.

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

The rsuite table does not properly reflect changes in state data

This is the render method that I am working on render() { return ( <Contentbox> <ol> {this.state.data.map((obj) => ( <li key={obj._id}>{obj.name}</li> ) ...

javascriptreactjsrsuite

Move the modal dialog so it appears closer to the top of the page

I am facing a challenge with my jQuery modal dialog. While it is loading properly, I am restricted to using an older version of jQuery (1.12.4) and cannot upgrade it. My goal is to center the modal close to the top of the page, similar to how it is positio ...

javascripthtmljquerycss

Finding the arithmetic operator and then assigning both the operator and its index to a globally accessible variable can be accomplished through a

Hello, I am currently learning web development and as a beginner project, I am working on creating a calculator in React. My goal is to have the selected arithmetic operation ("+", "/", "-", or "X") executed when the user clicks "=". To achieve this, I s ...

javascriptarraysreactjsfor-loopif-statement

Prevent identical values from being added repeatedly to a table while updating in real-time

Currently, I am facing an issue while running through a loop to extract values from an array. When I add a second value, it duplicates both the new and previous values in the table. For example, adding a row with value 488 works fine: <tr class="exe"& ...

javascriptjquerynode.jsexpress

Exploring the contents of this JSON array

I'm trying to fetch data from this link: <script type="text/javascript"> $.getJSON('http://api01.notaion.com/?item&id=120001462', function(data) { }); </script> I am uncertain whether I need to use a callback=?, a ...

javascriptjson

Waiting for a response from an API with the help of nodejs

I'm new to exploring Node.js and I'm interested in making API calls where the result is awaited before proceeding with any further actions. // defining endpoint function function getListMarket() { var deferred = Q.defer(); deferred.resolve(Q ...

javascriptnode.jsq

Show information based on the user's role

I need to adjust my menu so that certain sections are only visible to specific users based on their roles. In my database, I have three roles: user, admin1, and admin2. For instance, how can I ensure that Category 2 is only visible to users with the ROLE_A ...

javascriptangularjs

What could be causing the issue with this JS code?

var feedback = {}; feedback.data = ["Great!", "See ya", "Not a fan..."]; feedback.display = function() { this.data.forEach(function(item) { console.log(feedback.display()); }); } The goal here is to showcase the content stored within the ...

javascript

Creating an NPM package using Visual Studio 2017: A Step-by-Step Guide

I enjoy developing and publishing NPM packages using Visual Studio 2017. My preferred method is using TypeScript to generate the JavaScript files. Which project template would be best suited for this particular project? ...

javascriptvisual-studiotypescriptnpmvisual-studio-2017

Utilizing React to implement a search functionality with pagination and Material UI styling for

My current project involves retrieving a list of data and searching for a title name from a series of todos Here is the prototype I have developed: https://codesandbox.io/s/silly-firefly-7oe25 In the demo, you can observe two working cases in App.js & ...

javascriptreactjspaginationmaterial-uicodesandbox

"Guidance on jQuery syntax: Use a textbox to filter out and hide select options with each keystroke

Is there a way to modify my existing code so that it can show or hide elements based on a filter condition, specifically for Internet Explorer? I want to wrap the unmatched elements in a SPAN tag and hide them if the browser is IE, and vice versa by remo ...

javascriptjqueryhtmlsyntax

Optimizing the management of optional post fields in an Express.js application

When creating an endpoint with Express that includes both mandatory and non-mandatory fields in the post request, what is the optimal strategy for handling this? Would it be best to use something like if (field exists in req.body) { set variable } else { ...

javascriptexpress

Unable to transfer the output of a react query as a prop to a child

Working on my initial Next.js project, I encountered an issue with the article component that is rendered server-side. To optimize performance and reduce DOM elements, I decided to fetch tags for articles from the client side. Here's what I implemente ...

javascriptreactjsnext.jsreact-query

Preserving data in input fields even after a page is refreshed

I've been struggling to keep the user-entered values in the additional input fields intact even after the web page is refreshed. If anyone has any suggestions or solutions, I would greatly appreciate your assistance. Currently, I have managed to retai ...

javascriptjqueryhtmlsession-storage

Steps to enable the submit button in angular

Here's the code snippet: SampleComponent.html <nz-radio-group formControlName="radiostatus" [(ngModel)]="radioValue" (ngModelChange)="onChangeStatus($event)"> <label nz-radio nzValue="passed">Passed</label> <label nz-rad ...

javascriptangulartypescript

The Alert Component fails to display when the same Error is triggered for the second time

In the midst of developing a Website using Nuxt.js (Vue.js), I've encountered an issue with my custom Alert Component. I designed a contact form on the site to trigger a specialized notification when users input incorrect data or omit required fields ...

javascripthtmlcssvue.jsnuxt.js

Which jquery Grid is capable of handling a constant flow of updates in json format?

Provided below is a brief summary of this extensive post (please read the entire post to provide an answer): Current Implementations: The website retrieves a large json dataset (approximately 30kb, already compressed) The data is rendered as an HTML tab ...

javascriptjqueryjsonsortinggrid

"Implementing conditional rendering to hide the Footer component on specific pages in a React application

Is there a way to conceal the footer component on specific pages? app.js <div className="App"> <Header setShowMenu={setShowMenu} /> {showMenu ? <Menu navigateTo={navigateTo} setShowMenu={setShowMenu} /> : null} <Main na ...

javascriptreactjsreact-hooksreact-routercomponents

Accessing specific documents in Firebase cloud functions using a wildcard notation

Currently, I am working on implementing Firebase cloud functions and here are the tasks I need to achieve: Monitoring changes in documents within the 'public_posts' collection. Determining if a change involves switching the value of the &ap ...

javascriptnode.jsfirebasegoogle-cloud-firestoregoogle-cloud-functions

jQuery's visibility check function is not functioning properly

I am developing a web application for managing orders and finance in a restaurant. To enhance the functionality of my application, I require more screens to operate with. To facilitate this, I have implemented a small function to toggle between visibility: ...

javascriptjquerycss