At what precise moment does the ng-checked function get executed?

Question

At what precise moment does the ng-checked function get executed?

When utilizing AngularMaterial, I have implemented ng-checked in the following manner:

<md-list>
    <md-list-item ng-repeat="option in options">
       <p> {{ option }} </p>
       <md-checkbox class="md-secondary" aria-label="{{$index}}" ng-checked="exists($index)" ng-click="toggle($index)"></md-checkbox>
    </md-list-item>
</md-list>

Here is my exists function:

$scope.exists = function (optionNum) {
    console.log('Inside $scope.exists. Option: '+optionNum);
};

I also have a timer function:

function updateTimer() {
    var onTimeout = function(){
      mytimeout = $timeout(onTimeout,1000);
    }
    var mytimeout = $timeout(onTimeout,1000);
}

As a result, the $scope.exists function is being called every second. Can someone provide insights into the relationship between ng-checked and $timeout, as well as how to prevent this continuous calling?

javascript angularjs checkbox angular-material

Answer 1

Answer №1

In a single word, the reason is: digest cycle. Your function is linked to the view, so each time the digest cycle occurs, these expressions are evaluated for a dirty check to determine if the corresponding DOM needs updating. This process is not exclusive to angular material but rather a fundamental part of Angular's implementation. In your scenario, calling $timeout repeatedly triggers a digest cycle after each timeout execution, conducting a dirty check.

The approach you currently have is acceptable, however, when you bind a function to the DOM (as part of view binding, interpolation, property state attributes, or even DOM filters - excluding events), it's crucial to be mindful that extensive operations within that function can potentially slow down the entire application as it scales. It may also become challenging to troubleshoot and refactor as the app grows in size and issues arise. Whenever possible, opt to bind to a property instead of a function. Even when binding to a property, Angular's $parse still generates a getter function for it and includes it in the $$watchers queue for dirty checking during each digest cycle, albeit being a simpler getter function.

Thus, in your case, consider binding ng-checked to a property:

..ng-checked="doesExist"

And update the property doesExist whenever necessary. By doing this, instead of repeatedly verifying for existence, you explicitly adjust the corresponding property upon the occurrence of a relevant event, thereby making the logic more straightforward.

Answer 2

In a single word, the reason is: digest cycle. Your function is linked to the view, so each time the digest cycle occurs, these expressions are evaluated for a dirty check to determine if the corresponding DOM needs updating. This process is not exclusive to angular material but rather a fundamental part of Angular's implementation. In your scenario, calling $timeout repeatedly triggers a digest cycle after each timeout execution, conducting a dirty check.

The approach you currently have is acceptable, however, when you bind a function to the DOM (as part of view binding, interpolation, property state attributes, or even DOM filters - excluding events), it's crucial to be mindful that extensive operations within that function can potentially slow down the entire application as it scales. It may also become challenging to troubleshoot and refactor as the app grows in size and issues arise. Whenever possible, opt to bind to a property instead of a function. Even when binding to a property, Angular's $parse still generates a getter function for it and includes it in the $$watchers queue for dirty checking during each digest cycle, albeit being a simpler getter function.

Thus, in your case, consider binding ng-checked to a property:

..ng-checked="doesExist"

And update the property doesExist whenever necessary. By doing this, instead of repeatedly verifying for existence, you explicitly adjust the corresponding property upon the occurrence of a relevant event, thereby making the logic more straightforward.

Answer 3

Answer №2

The ng-checked directive, along with many others in Angular, relies on watches for their functionality. Whenever a digest cycle is triggered, all of the watchers are evaluated, including the function associated with the directive. Therefore, every time $timeout runs, it initiates a new digest cycle and evaluates all watchers, ensuring that the view stays updated with the data from your controllers and directives.

However, having too many watchers or complex functions can lead to performance issues. It's advisable to keep your logic simple and efficient, returning true or false quickly. Avoid setting watches on everything to optimize performance.

Answer 4

The ng-checked directive, along with many others in Angular, relies on watches for their functionality. Whenever a digest cycle is triggered, all of the watchers are evaluated, including the function associated with the directive. Therefore, every time $timeout runs, it initiates a new digest cycle and evaluates all watchers, ensuring that the view stays updated with the data from your controllers and directives.

However, having too many watchers or complex functions can lead to performance issues. It's advisable to keep your logic simple and efficient, returning true or false quickly. Avoid setting watches on everything to optimize performance.

At what precise moment does the ng-checked function get executed?

Answer №1

Answer №2

Similar questions

Can the useNavigation hook be used to navigate to a class component in React?

Setting a cookie in a browser using an AJAX response: A step-by-step guide

Comparison of jQuery, AngularJS, and Node.js

Angular 6 - Consistently returning a value of -1

Non-IIFE Modules

Is Jquery Mobile's Table lacking responsiveness?

While working on a project in React, I successfully implemented an async function to fetch data from an API. However, upon returning the data, I encountered an issue where it was displaying as a

What is the best way to keep an image fixed at the bottom, but only when it's out of view in the section

Is it possible to recognize when the mouse button is held down and the cursor is outside the viewport by using mouseleave detection?

When initiating the Grunt Express Server, it prompts an issue: Error: ENOENT - the file or directory 'static/test.json' cannot be found

Transmitting the character symbol '&' within a string from Angular to PHP

What is the best way to integrate a Next.js Image component with a set width and an adaptable height in order to maintain the image's proportions?

Tips for making immutable state changes in React

Integrate jquery into an expressJs application

What is the best method for injecting a factory dependency into an angular controller?

How to Create a DataTable Responsive Feature Where All Columns Collapse on Click, Except the Last One?

Guide on disabling withCredentials in an angularjs and expressjs project

What are the steps for integrating mongoDB with an angular2 application?

Leveraging thousands of on() event listeners in Firebase demonstrates exceptional design

Why use getElementById(id) to obtain an element in JavaScript when it already exists in the JS?