docs(attribute-directives): minor updates incl. e2e fix (#3330)

- Prose: copyedits, including fix to misnamed directive class
(`MyHighlightDirective` --> `HighlightDirective`).
- E2E update to avoid warning of multiple matching elements.
- Code: remove obsolete template region.
- Remove obsolete Jade blocks (no longer required by Dart).
- Replace old Jade syntax with plain markdown.
- Remove a few unnecessary `:marked`.

Author: chalin

public/docs/_examples/attribute-directives/e2e-spec.ts

@@ -15,7 +15,7 @@ describe('Attribute directives', function () {
   });
 
   it('should be able to select green highlight', function () {
-    let highlightedEle = element(by.cssContainingText('p', 'Highlight me'));
+    let highlightedEle = element(by.cssContainingText('p', 'Highlight me!'));
     let lightGreen = 'rgba(144, 238, 144, 1)';
 
     expect(highlightedEle.getCssValue('background-color')).not.toEqual(lightGreen);

public/docs/_examples/attribute-directives/ts/src/app/app.component.1.html

@@ -2,19 +2,13 @@
 <h1>My First Attribute Directive</h1>
 <!-- #docregion applied -->
 <p myHighlight>Highlight me!</p>
-<!-- #enddocregion applied -->
-<!-- #enddocregion -->
+<!-- #enddocregion applied,  -->
 
 <!-- #docregion color-1 -->
 <p myHighlight highlightColor="yellow">Highlighted in yellow</p>
 <p myHighlight [highlightColor]="'orange'">Highlighted in orange</p>
-
 <!-- #enddocregion color-1 -->
 
 <!-- #docregion color-2 -->
 <p myHighlight [highlightColor]="color">Highlighted with parent component's color</p>
 <!-- #enddocregion color-2 -->
-
-<!-- #docregion p-style-background -->
-<p [style.background]="'lime'">I am green with envy!</p>
-<!-- #enddocregion p-style-background -->

public/docs/_examples/attribute-directives/ts/src/app/app.component.1.ts

@@ -9,4 +9,3 @@ import { Component } from '@angular/core';
 export class AppComponent {
   color = 'yellow';
 }
-// #enddocregion class

public/docs/_examples/attribute-directives/ts/src/app/app.component.html

@@ -1,5 +1,4 @@
-<!-- #docregion -->
-<!-- #docregion v2 -->
+<!-- #docregion v2, -->
 <h1>My First Attribute Directive</h1>
 
 <h4>Pick a highlight color</h4>
@@ -10,15 +9,13 @@ <h4>Pick a highlight color</h4>
 </div>
 <!-- #docregion color -->
 <p [myHighlight]="color">Highlight me!</p>
-<!-- #enddocregion color -->
-<!-- #enddocregion v2 -->
+<!-- #enddocregion color, v2 -->
 
 <!-- #docregion defaultColor -->
 <p [myHighlight]="color" defaultColor="violet">
   Highlight me too!
 </p>
-<!-- #enddocregion defaultColor -->
-<!-- #enddocregion -->
+<!-- #enddocregion defaultColor, -->
 
 <hr>
 <p><i>Mouse over the following lines to see fixed highlights</i></p>

public/docs/_examples/attribute-directives/ts/src/app/app.component.ts

@@ -10,5 +10,3 @@ import { Component } from '@angular/core';
 export class AppComponent {
   color: string;
 }
-// #enddocregion class
-// #enddocregion

public/docs/_examples/attribute-directives/ts/src/app/highlight.directive.2.ts

@@ -10,17 +10,6 @@ export class HighlightDirective {
   // #docregion ctor
   constructor(private el: ElementRef) { }
   // #enddocregion ctor
-  // #enddocregion
-
-  // #docregion color
-  @Input() highlightColor: string;
-  // #enddocregion color
-
-  // #docregion color-2
-  @Input() myHighlight: string;
-  // #enddocregion color-2
-
-  // #docregion
 
   // #docregion mouse-methods, host
   @HostListener('mouseenter') onMouseEnter() {
@@ -39,7 +28,14 @@ export class HighlightDirective {
   private highlight(color: string) {
     this.el.nativeElement.style.backgroundColor = color;
   }
-  // #enddocregion mouse-methods
+  // #enddocregion mouse-methods, 
 
+  // #docregion color
+  @Input() highlightColor: string;
+  // #enddocregion color
+
+  // #docregion color-2
+  @Input() myHighlight: string;
+  // #enddocregion color-2
 }
-// #enddocregion
+

public/docs/_examples/attribute-directives/ts/src/app/highlight.directive.ts

@@ -1,7 +1,5 @@
 /* tslint:disable:member-ordering */
-// #docplaster
-// #docregion
-// #docregion imports
+// #docregion imports, 
 import { Directive, ElementRef, HostListener, Input } from '@angular/core';
 // #enddocregion imports