Avoiding infinite digest loops caused by ng-model with getterSetter in AngularJS

Question

Avoiding infinite digest loops caused by ng-model with getterSetter in AngularJS

Check out this HTML snippet:

<select style="width: 100%;" ng-model="vm.orgType" ng-model-options="{getterSetter: true}" ng-options="orgType as orgType.ORGANIZATION_TYPE for orgType in vm.orgTypes">
</select>

Now, let's take a look at the getter/setter function:

function orgType(selectedType) {
    if (arguments.length == 0)
        return orgType.selectedOrgType || { ORGANIZATION_TYPE: 'Organization Type', ORGANIZATION_TYPE_ID: null };

    orgType.selectedOrgType = selectedType;
    if (selectedType.ORGANIZATION_TYPE_ID) {
        if (vm.registrant.StakeholderOrgs[0])
            vm.registrant.StakeholderOrgs[0] = selectedType.ORGANIZATION_TYPE_ID;
        else
            vm.registrant.StakeholderOrgs.push(selectedType.ORGANIZATION_TYPE_ID);
    } else
        vm.registrant.StakeholderOrgs.splice(0);
}

This specific line of code is causing an infinite digest loop error:

return orgType.selectedOrgType || { ORGANIZATION_TYPE: 'Organization Type', ORGANIZATION_TYPE_ID: null };

Allow me to explain my intention with this setup. I aim to add the ID to a list upon making a selection. While I could simply use an ng-model on a variable like selectedOrgType and handle logic in an ng-change, I prefer structuring a dropdown without creating extra model variables. My approach involves utilizing a getter/setter for more streamlined functionality. Despite setting one of vm.orgTypes to

{ ORGANIZATION_TYPE: 'Organization Type', ORGANIZATION_TYPE_ID: null }

as the default value, I encountered the unexpected digest error and am puzzled by its origin.

javascript angularjs

Answer 1

Answer №1

By including the ng-model attribute, Angular automatically adds an internal watch that checks the value on every digest loop. If the value changes, it triggers another digest cycle.

In your situation, you are returning an object literal. In JavaScript, when comparing two literals with the same structure, they will evaluate to false:

({a:1} == {a:1}) // false

This is because they are actually two different objects.

Therefore, when you return an object literal in your getter, the watch compares it to the previous value and since it's a new object each time, it results in false.

This leads to the error of infinite digest loops.

To resolve this issue, simply return the same object:

If you have an object inside an array like:

vm.orgTypes=[
    { ORGANIZATION_TYPE: 'Organization Type', ORGANIZATION_TYPE_ID: null }
];

You can directly use it:

return orgType.selectedOrgType || orgTypes[0];

Another approach is to save the default value to a variable and utilize it:

var defaultSelect = { ORGANIZATION_TYPE: 'Organization Type', ORGANIZATION_TYPE_ID: null };

....

function orgType(selectedType) {
    if (arguments.length == 0)
        return orgType.selectedOrgType || defaultSelect;

By doing this, you ensure that you return the same element in the default scenario, thus avoiding infinite digest cycles.

Answer 2

By including the ng-model attribute, Angular automatically adds an internal watch that checks the value on every digest loop. If the value changes, it triggers another digest cycle.

In your situation, you are returning an object literal. In JavaScript, when comparing two literals with the same structure, they will evaluate to false:

({a:1} == {a:1}) // false

This is because they are actually two different objects.

Therefore, when you return an object literal in your getter, the watch compares it to the previous value and since it's a new object each time, it results in false.

This leads to the error of infinite digest loops.

To resolve this issue, simply return the same object:

If you have an object inside an array like:

vm.orgTypes=[
    { ORGANIZATION_TYPE: 'Organization Type', ORGANIZATION_TYPE_ID: null }
];

You can directly use it:

return orgType.selectedOrgType || orgTypes[0];

Another approach is to save the default value to a variable and utilize it:

var defaultSelect = { ORGANIZATION_TYPE: 'Organization Type', ORGANIZATION_TYPE_ID: null };

....

function orgType(selectedType) {
    if (arguments.length == 0)
        return orgType.selectedOrgType || defaultSelect;

By doing this, you ensure that you return the same element in the default scenario, thus avoiding infinite digest cycles.

Avoiding infinite digest loops caused by ng-model with getterSetter in AngularJS

Answer №1

Similar questions

ng-click="showInventory()" onClick="currentTemplate='/inventory.html'" Not

What is the process for conducting linting with nodemon?

Creating a grid UI in AngularJS using Typescript: utilizing functions as column values

Dealing with Buffer data received from a NextJS backend API

What type of Javascript is required for a photo carousel that displays random images from a designated folder?

Using the ref callback to access getBoundingClientRect values in React Components

Retrieve Next Element with XPath

Trouble with triggering Ajax file upload progress event

Maintain the previous droppable positioning after refreshing the page

Issue arises where multiple asynchronous functions cause infinite re-rendering due to the shared loading state

update the variables based on the changes in the service

What causes my useEffect hook to trigger twice in React?

What is the best way to create an index for a user-provided value in a textbox

Tips for recognizing the click, such as determining which specific button was pressed

Indexing text fields for MongoDB collection that have been populated

The AudioPlayer refuses to play following a track change

The functionality of a button within an AngularJS directive is not functioning as intended

To prevent the animation from overflowing, set the parent element to have hidden overflow while still displaying the child element

Generating Tree Structure Object Automatically from Collection using Keys

The directive binding value is accurate, however it is failing to return a true result