chore(doc-gen): add directive names that aren't params to usage section

When a directive can be used as an attribute or CSS class, but doesn't take 
a value, its name is not included in the parameters, which previously meant 
that the directive name was missing from the Attribute / CSS Class usage 
section of the docs.

This commit adds the name to the Usage section when it is missing
from the parameters.

Closes #14045
Closes #16265

docs/app/e2e/api-docs/directive-pages.scenario.js

@@ -0,0 +1,58 @@
+'use strict';
+
+describe('directives', function() {
+
+  describe('parameter section', function() {
+
+    it('should show the directive name only if it is a param (attribute) with a value', function() {
+      browser.get('build/docs/index.html#!/api/ng/directive/ngInclude');
+      expect(getParamNames().getText()).toContain('ngInclude | src');
+
+      browser.get('build/docs/index.html#!/api/ngRoute/directive/ngView');
+      expect(getParamNames().getText()).not.toContain('ngView');
+    });
+  });
+
+  describe('usage section', function() {
+
+    it('should show the directive name if it is a param (attribute) with a value', function() {
+      browser.get('build/docs/index.html#!/api/ng/directive/ngInclude');
+
+      expect(getUsageAs('element', 'ng-include').isPresent()).toBe(true);
+      expect(getUsageAs('attribute', 'ng-include').isPresent()).toBe(true);
+      expect(getUsageAs('CSS class', 'ng-include').isPresent()).toBe(true);
+    });
+
+    it('should show the directive name if it is a void param (attribute)', function() {
+      browser.get('build/docs/index.html#!/api/ngRoute/directive/ngView');
+
+      expect(getUsageAs('element', 'ng-view').isPresent()).toBe(true);
+      expect(getUsageAs('attribute', 'ng-view').isPresent()).toBe(true);
+      expect(getUsageAs('CSS class', 'ng-view').isPresent()).toBe(true);
+    });
+  });
+});
+
+function getParamNames() {
+  var argsSection = element(by.className('input-arguments'));
+
+  var paramNames = argsSection.all(by.css('tr td:nth-child(1)'));
+
+  return paramNames;
+}
+
+// Based on the type of directive usage, the directive name will show up in the code block
+// with a specific class
+var typeClassMap = {
+  element: 'tag',
+  attribute: 'atn',
+  'CSS class': 'atv'
+};
+
+function getUsageAs(type, directiveName) {
+  var usage = element(by.className('usage'));
+
+  var as = usage.element(by.cssContainingText('li', 'as ' + type));
+
+  return as.element(by.cssContainingText('span.' + typeClassMap[type], directiveName));
+}

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

@@ -29,10 +29,23 @@
       </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 @@
     {% 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 $}>