Fix docs usage section for directives with void attributes

docs/app/e2e/usage.scenario.js

@@ -0,0 +1,55 @@
+'use strict';
+
+/**
+ * This scenario checks if the usage section for selected directives is rendered correctly
+ */
+
+describe('usage section', function() {
+
+  describe('should list the directive name', function() {
+
+    it('when directive name is a parameter with a value', function() {
+      browser.get('build/docs/index.html#!/api/ng/directive/ngInclude');
+
+      // Ensure that ngInclude appears as an argument
+      var args = element(by.className('input-arguments'));
+
+      var paramNames = args.all(by.css('tr td:nth-child(1)'));
+
+      expect(paramNames.getText()).toContain('ngInclude | src');
+
+      var usage = element(by.className('usage'));
+
+      var asElement = usage.element(by.cssContainingText('li', 'as element'));
+      var asAttribute = usage.element(by.cssContainingText('li', 'as attribute'));
+      var asCssClass = usage.element(by.cssContainingText('li', 'as CSS class'));
+
+      expect(asElement.element(by.cssContainingText('span.tag', 'ng-include')).isPresent()).toBe(true);
+      expect(asAttribute.element(by.cssContainingText('span.atn', 'ng-include')).isPresent()).toBe(true);
+      expect(asCssClass.element(by.cssContainingText('span.atv', 'ng-include')).isPresent()).toBe(true);
+    });
+
+
+    it('when directive name is a void parameter', function() {
+      browser.get('build/docs/index.html#!/api/ngRoute/directive/ngView');
+
+      // Ensure that ngView does not appear as an argument
+      var args = element(by.className('input-arguments'));
+
+      var paramNames = args.all(by.css('tr td:nth-child(1)'));
+
+      expect(paramNames.getText()).not.toContain('ngView');
+
+      var usage = element(by.className('usage'));
+
+      var asElement = usage.element(by.cssContainingText('li', 'as element'));
+      var asAttribute = usage.element(by.cssContainingText('li', 'as attribute'));
+      var asCssClass = usage.element(by.cssContainingText('li', 'as CSS class'));
+
+      expect(asElement.element(by.cssContainingText('span.tag', 'ng-view')).isPresent()).toBe(true);
+      expect(asAttribute.element(by.cssContainingText('span.atn', 'ng-view')).isPresent()).toBe(true);
+      expect(asCssClass.element(by.cssContainingText('span.atv', 'ng-view')).isPresent()).toBe(true);
+    });
+
+  });
+});

docs/config/templates/ngdoc/api/directive.template.html

@@ -29,10 +29,23 @@ <h2 id="usage">Usage</h2>
       </li>
     {% endif -%}
 
+
+    {% set hasNameAsParam = false %}
+
+    {# when a directive's name is not a parameter (i.e. doesn't take a value),
+      add the directive name to the list of attributes and/or css classes #}
+
+    {%- for param in doc.params %}
+    {% set hasNameAsParam = true if param.name === doc.name else hasNameAsParam %}
+    {%- endfor %}
+
     {%- if doc.restrict.attribute -%}
       <li>as attribute:
         {% code %}
         <{$ doc.element $}
+          {%- if not hasNameAsParam %}
+          {$ lib.directiveParam(doc.name, {}, '', '') $}
+          {%- endif -%}
           {%- for param in doc.params %}
           {$ lib.directiveParam(param.name, param.type, '="', '"') $}
           {%- endfor %}>
@@ -43,10 +56,14 @@ <h2 id="usage">Usage</h2>
     {% endif -%}
 
     {%- if doc.restrict.cssClass -%}
+
       <li>as CSS class:
         {% code %}
         {% set sep = joiner(' ') %}
         <{$ doc.element $} class="
+        {%- if not hasNameAsParam -%}
+          {$ sep() $}{$ lib.directiveParam(doc.name, {}, '', '') $}
+        {%- endif -%}
         {%- for param in doc.params -%}
           {$ sep() $}{$ lib.directiveParam(param.name, param.type, ': ', ';') $}
         {%- endfor %}"> ... </{$ doc.element $}>