Never mix HTML DOM manipulation code and AngularJS code

One of the key mistakes that is made by developers new to AngularJS is using HTML DOM manipulation code and AngularJS code together. Though may work sometimes, this would turn out to be a serious problem in some cases.

Consider the following example where we are creating list of items using ng-repeat in the HTML Template.

Record value is : {{record.value}}

 

However we also have the following  code inside the AngularJS controller that sets the CSS class for the labels dynamically created using ng-repeat.

for (var index in records)

{

document.getElementById(“ectdqa”+index).className = “highlight”;

}

This code inside the controller may work sometimes and may not work sometimes. The reason being, the code inside the controller might try to set the CSS class even before the control is created by the ng-repeat command.

The correct way would be to set the highlight flag inside the model and use the model during ng-repeat to set the CSS Class.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s