Details

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>