Angular Hint Directives

This hinting module is part of the overall tool AngularHint that aims to help you spend less time finding silent errors in your code and more time programming. Loading this module will provide warnings specific to AngularJS directives.

See the AngularHintEvents NPM Module.

Usage

Install the AngularHint NPM module and use ng-hint or ng-hint-include='directives' to enable AngularHintDirectives. Further installation information is available on the main AngularHint repository.

Features:

• Misspelled HTML attributes and tags
• Misspelled directives and attributes (custom and core)
• Missing required attributes declared within the scope property
• Using directives against their restrict property
• Using deprecated directive options or deprecated directives
• Using HTML event attributes instead of Angular event directives (onclick vs. ngClick)
• Using ngRepeat's track by and filter incorrectly
• Declaring directives with no namespace

Misspelled Directives and Attributes

AngularHintDirectives identifies directives that are undefined, most likely because of spelling errors. It provides suggestions of similarly spelled directives that are defined. For example, the code below has a simple spelling error that would prevent the list elements from being loaded. AngularHintDirectives warns that it found the nonexistent 'ng-repaet' directive and suggests that 'ng-repeat' might be the intended command.

<div>
  <ul>
    <li ng-repaet="i in [1,2,3,4]">{{i}}</li>
  </ul>
</div>

Missing Required Attributes

AngularHintDirectives identifies whether you include all variables declared through two way binding. In the example below, we have declared the attributes 'breadcrumbs' and 'id' to exsist within the 'haBreadcrumbs' directive.

angular.module('breadcrumbs').
directive('haBreadcrumbs', function() {
  return {
    restrict: 'E',
    templateUrl: 'components/breadcrumbs/breadcrumbs.html',
    scope: {
      breadcrumbs: '=',
      id: '@'
    }
  };
});

If you used your directive like in the HTML example below, you would be notified that you are missing the 'id' attribute from your 'haBreadcrumbs' directive.

<breadcrumbs ha-breadcrumbs="['home','profile','about']"> </breadcrumbs>

Following Restrict Property

AngularHintDirectives will also notify you if you use directives reserved for elements or attributes incorrectly. In the code below, we create a directive called 'haBreadcrumbs' that is restricted to elements only. It will have an attribute by the name of 'breadcrumbs'.

angular.module('breadcrumbs').
directive('haBreadcrumbs', function() {
  return {
    restrict: 'E',
    templateUrl: 'components/breadcrumbs/breadcrumbs.html',
    scope: {
      breadcrumbs: '='
    }
  };
});

So if in your code you tried to use the example below You would promtly be notified that you have used 'ha-breadcrumbs' as an attribute when its reserved for elements only and vice verse for 'breadcrumbs'.

<breadcrumbs ha-breadcrumbs="['home','profile','about']"> </breadcrumbs>

Using Deprecated Options

AngularHintDirectives will notify you if you are using deprecated options when instantiating your directive. In the example below you will be warned about using the deprecated 'replace' option in your directive.

angular.module('breadcrumbs').
directive('haBreadcrumbs', function() {
  return {
    restrict: 'E',
    templateUrl: 'components/breadcrumbs/breadcrumbs.html',
    scope: {breadcrumbs: '='},
    replace: true
  };
});

Alternatively, deprecated directives will also generate warnings. The ng-bind-html-unsafe directive is deprecated and will generate a warning. See the breaking change for more information.

Using Angular Event Directives

AngularHintDirectives will notify you if you are using HTML event attributes such as onclick, onfocus, etc. and prompt you to use their Angular counterparts. Below you would be told to change 'onchange' to 'ng-change'.

<div id="search" onchange="update()"></div>

Using ngRepeat Incorrectly

ngRepeat has a lot of options (e.g. track by and filter:) and getting them in the right order can be hard. AngularHintDirective helps with this by suggesting the correct ordering for some of the more common uses of ngRepeat. In the example below, track by is infront of the pipe, |, when it actually belongs after filter:searchText. AngularHintDirective would notify you that the usage is incorrect and that you should instead try item in items | filter:searchText track by item.id.

<ul>
  <li ng-repeat="item in items track by item.id | filter:searchText">
  {{item.name}} - {{item.price}}
  </li>
</ul>

Missing Namespace

It is important for the components we create to have their own unique namespace so as to not conflict with exsisting components in Angular or external libraries that may be used. The best practice for namespaces it to use lowerCamelCase and a unique prefix for the scope of an application. For example, in the code below, if a directive with name mycomponent was created, you would be warned to use a more appropriate name.

angular.module('breadcrumbs').
  directive('mycomponent', function() { ... });
});

Improved namespace:

angular.module('breadcrumbs').
  directive('abMyComponent', function() { ... });
});

A prefix like ab that is defined uniquely for the scope of an application (think of the ng prefix used for AngularJS directives) ensures that custom directives defined with that prefix are less likely to conflict with the names given to AngularJS directives or directives loaded from third parties.

Contributing

Want to improve AngularHintEvents or other facets of AngularHint? We'd love to get your help! See the Contributing Guidelines.

License

Copyright 2014 Google, Inc. http://angularjs.org

Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.