AngularJS Markup and HTML Validation

HTML validation checkers tend to be picky when they find AngularJS (Angular 1) markup in the code.

One issue that comes up in validation is the use of Angular directive with the ng- prefix. HTML checkers do not recognize them as valid attributes and throws out an error. The easiest and simplest way to fix this is to add data- prefix in front.

For example ng-app should be written as data-ng-app.

Another issues is the use of Angular expressions to dynamically populate attributes.

<img src="{{hero.slideImageURL}}" alt="{{hero.slideAltTest}}"

When validating, the above is considered as bad values for attributes and returns an error.

The fix for this is to use ngAttr for binding.

Use the ng-attr prefix with the attribute when binding an expression. During the binding process, it will replace the value of the corresponding non-prefixed attribute.

So, the above example can be re-written as:

<img src="images" data-ng-attr-src="{{hero.slideImageURL}}" data-ng-attr-alt="{{hero.slideAltTest}}" alt="Banner"

ng-attr-code-1

This will be rendered as something like this:

<img src="/images/banner-1.jpg" data-ng-attr-src="{{hero.slideImageURL}}" data-ng-attr-alt="{{hero.slideAltTest}}" alt="This is a nice banner"

ng-attr-code-2

(Looks like WordPress’s strips out data-ng-attr- prefixed attributes when rendering, so the closing of the tag is removed. Added images as a backup too.)

Make sure to use data-ng-attr- as the prefix to avoid the first issue mentioned.

It’s also important to have the standard non-prefixed attributes also, either with a blank or a generic value. These will be replaced by the data-ng-attr- values. Otherwise accessibility checkers will give an error saying that tags are missing required attributes.

Quick Links

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 )

Google+ photo

You are commenting using your Google+ 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 )

Connecting to %s