Incorrect error with Angular: Element yyyy is missing required attribute class.

For one of my custom directives I'm getting an error in WebStorm 9 that says Element view-field is missing required attribute class. However, there is no attribute class defined for this directive.

I tried to reproduce it in a separate small project with the exact same directive and the error did not reproduce there. I don't see any difference in where it works and where it doesn't. I also tried clearing the cache and restarting (several times).

Here's the directive:

angular.module('myApp').directive('myViewField', function():ng.IDirective {

    return {
        restrict: 'E',
: true,
: '/partials/my-view-field.html',
: {
            label: '@'

Here's the template:

<div class="viewLineItem">

        <span class="viewLineLabel">
{{label | translate}}</span>
        <span class="viewLineTranscludeContainer" ng-transclude></span>
And here's the usage:
<my-view-field label="accountOwner">
    <span class="viewLineReadonlyText">{{user | fullNameDisplayOrder}}</span>

I have lots of other directives in the html file and the others all work fine.

The `my-view-field` directive is not the only one with this problem. So far I've seen one other with the same issue and same error, Element yyyy is missing required attribute class, it's always class.

Any thoughts on what would cause this? What else can I look into? Should I report this in YouTrack even though I can't reproduce it reliably outside my large project?



WebStorm 9.0
Build #WS-139.104, built on October 16, 2014
JRE: 1.7.0_60-b19 x86
JVM: Java HotSpot(TM) Server VM by Oracle Corporation

Comment actions Permalink

The issue can hardly be tracked down without the project that shows it up...
Please can you attach a screenshot of the error?

Comment actions Permalink

Thanks for taking a look. Here's a screenshot of the error, the directive, and the partial.

2014-10-21 21_05_42-azp-app - [C__azp_azp-app_src] - ..._partials_account-view.html - WebStorm 9.0.png

2014-10-21 21_07_57-azp-app - [C__azp_azp-app_src] - ..._scripts_main.js - WebStorm 9.0.png

2014-10-21 21_09_10-azp-app - [C__azp_azp-app_src] - ..._partials_az-view-field.html - WebStorm 9.0.png

Comment actions Permalink

Here's another screen shot. This is a usage of the exact same directive in a different html file, and there's no warning about class being required.

2014-10-21 21_12_52-azp-app - [C__azp_azp-app_src] - ..._tools_ng-scratch.html - WebStorm 9.0.png



Comment actions Permalink

I found this configuration in my .idea folder:

    <inspection_tool enabled="true" level="WARNING" enabled_by_default="true">
      <option name="myAdditionalRequiredHtmlAttributes" value="class" />

Full file attached.

Seems related. I didn't see this inspection option in other projects. How does this get set? Could I have set it by accident?



Comment actions Permalink

Hmm... actual option name is 'additional not required html attributes'... You must have added 'class' there usoing a quick fix (Alt+Enter, add 'class' to not required html attributes). Strange that error is still reported despite this option


Please sign in to leave a comment.