angular-docs-cn/public/docs/js/latest/api/annotations/directive-class.jade

p.location-badge.
  exported from <a href="/angular2/annotations.html">angular2/annotations</a>
  defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/core/annotations/annotations.js#L240">angular2/src/core/annotations/annotations.js (line 240)</a>

:markdown
  Directives allow you to attach behavior to elements in the DOM.
  
  Directive is an abstract concept, instead use concrete directives: <a href="Component-class.html"><code>Component</code></a>, <a href="DynamicComponent-class.html"><code>DynamicComponent</code></a>, <a href="Decorator-class.html"><code>Decorator</code></a>
  or <a href="Viewport-class.html"><code>Viewport</code></a>.
  
  A directive consists of a single directive annotation and a controller class. When the directive's `selector` matches
  elements in the DOM, the following steps occur:
  
  1. For each directive, the `ElementInjector` attempts to resolve the directive's constructor arguments.
  2. Angular instantiates directives for each matched element using `ElementInjector` in a depth-first order,
     as declared in the HTML.
  
  ## Understanding How Injection Works
  
  There are three stages of injection resolution.
  - *Pre-existing Injectors*:
    - The terminal <a href="../di/Injector-class.html"><code>Injector</code></a> cannot resolve dependencies. It either throws an error or, if the dependency was
      specified as `@Optional`, returns `null`.
    - The platform injector resolves browser singleton resources, such as: cookies, title, location, and others.
  - *Component Injectors*: Each `@Component` has its own <a href="../di/Injector-class.html"><code>Injector</code></a>, and they follow the same parent-child hierarchy
      as the components in the DOM.
  - *Element Injectors*: Each component has a Shadow DOM. Within the Shadow DOM each element has an `ElementInjector`
      which follow the same parent-child hierarchy as the DOM elements themselves.
  
  When a template is instantiated, it also must instantiate the corresponding directives in a depth-first order. The
  current `ElementInjector` resolves the constructor dependencies for each directive.
  
  Angular then resolves dependencies as follows, according to the order in which they appear in the <a href="View-class.html"><code>View</code></a>:
  
  1. Dependencies on the current element
  2. Dependencies on element injectors and their parents until it encounters a Shadow DOM boundary
  3. Dependencies on component injectors and their parents until it encounters the root component
  4. Dependencies on pre-existing injectors
  
  
  The `ElementInjector` can inject other directives, element-specific special objects, or it can delegate to the parent
  injector.
  
  To inject other directives, declare the constructor parameter as:
  - `directive:DirectiveType`: a directive on the current element only
  - `@Ancestor() directive:DirectiveType`: any directive that matches the type between the current element and the
     Shadow DOM root. Current element is not included in the resolution, therefore even if it could resolve it, it will
     be ignored.
  - `@Parent() directive:DirectiveType`: any directive that matches the type on a direct parent element only.
  - `@Children query:Query<DirectiveType>`: A live collection of direct child directives (will be implemented in later release).
  - `@Descendants query:Query<DirectiveType>`: A live collection of any child directives (will be implemented in later relaese).
  
  To inject element-specific special objects, declare the constructor parameter as:
  - `element: NgElement` to obtain a DOM element (DEPRECATED: replacement coming)
  - `viewContainer: ViewContainer` to control child template instantiation, for <a href="Viewport-class.html"><code>Viewport</code></a> directives only
  - `bindingPropagation: BindingPropagation` to control change detection in a more granular way.
  
  ## Example
  
  The following example demonstrates how dependency injection resolves constructor arguments in practice.
  
  
  Assume this HTML template:
  
  ```
  <div dependency="1">
    <div dependency="2">
      <div dependency="3" my-directive>
        <div dependency="4">
          <div dependency="5"></div>
        </div>
        <div dependency="6"></div>
      </div>
    </div>
  </div>
  ```
  
  With the following `dependency` decorator and `SomeService` injectable class.
  
  ```
  @Injectable()
  class SomeService {
  }
  
  @Decorator({
    selector: '[dependency]',
    properties: {
      'id':'dependency'
    }
  })
  class Dependency {
    id:string;
  }
  ```
  
  Let's step through the different ways in which `MyDirective` could be declared...
  
  
  ### No injection
  
  Here the constructor is declared with no arguments, therefore nothing is injected into `MyDirective`.
  
  ```
  @Decorator({ selector: '[my-directive]' })
  class MyDirective {
    constructor() {
    }
  }
  ```
  
  This directive would be instantiated with no dependencies.
  
  
  ### Component-level injection
  
  Directives can inject any injectable instance from the closest component injector or any of its parents.
  
  Here, the constructor declares a parameter, `someService`, and injects the `SomeService` type from the parent
  component's injector.
  ```
  @Decorator({ selector: '[my-directive]' })
  class MyDirective {
    constructor(someService: SomeService) {
    }
  }
  ```
  
  This directive would be instantiated with a dependency on `SomeService`.
  
  
  ### Injecting a directive from the current element
  
  Directives can inject other directives declared on the current element.
  
  ```
  @Decorator({ selector: '[my-directive]' })
  class MyDirective {
    constructor(dependency: Dependency) {
      expect(dependency.id).toEqual(3);
    }
  }
  ```
  This directive would be instantiated with `Dependency` declared at the same element, in this case `dependency="3"`.
  
  
  ### Injecting a directive from a direct parent element
  
  Directives can inject other directives declared on a direct parent element. By definition, a directive with a
  `@Parent` annotation does not attempt to resolve dependencies for the current element, even if this would satisfy
  the dependency.
  
  ```
  @Decorator({ selector: '[my-directive]' })
  class MyDirective {
    constructor(@Parent() dependency: Dependency) {
      expect(dependency.id).toEqual(2);
    }
  }
  ```
  This directive would be instantiated with `Dependency` declared at the parent element, in this case `dependency="2"`.
  
  
  ### Injecting a directive from any ancestor elements
  
  Directives can inject other directives declared on any ancestor element (in the current Shadow DOM), i.e. on the
  parent element and its parents. By definition, a directive with an `@Ancestor` annotation does not attempt to
  resolve dependencies for the current element, even if this would satisfy the dependency.
  
  ```
  @Decorator({ selector: '[my-directive]' })
  class MyDirective {
    constructor(@Ancestor() dependency: Dependency) {
      expect(dependency.id).toEqual(2);
    }
  }
  ```
  
  Unlike the `@Parent` which only checks the parent, `@Ancestor` checks the parent, as well as its
  parents recursively. If `dependency="2"` didn't exist on the direct parent, this injection would have returned
  `dependency="1"`.
  
  
  ### Injecting a live collection of direct child directives
  
  
  A directive can also query for other child directives. Since parent directives are instantiated before child
  directives, a directive can't simply inject the list of child directives. Instead, the directive 
  injects a <a href="../view/QueryList-class.html"><code>QueryList</code></a>, which updates its contents as children are added, removed, or moved by any 
  <a href="Viewport-class.html"><code>Viewport</code></a> directive such as a `for`, an `if`, or a `switch`.
  
  ```
  @Decorator({ selector: '[my-directive]' })
  class MyDirective {
    constructor(@Query(Marker) dependencies:QueryList<Maker>) {
    }
  }
  ```
  
  This directive would be instantiated with a <a href="../view/QueryList-class.html"><code>QueryList</code></a> which contains `Dependency` 4 and 6. Here, `Dependency` 
  5 would not be included, because it is not a direct child.
  
  ### Injecting a live collection of descendant directives
  
  Note: This is will be implemented in later release. ()
  
  Similar to `@Children` above, but also includes the children of the child elements.
  
  ```
  @Decorator({ selector: '[my-directive]' })
  class MyDirective {
    constructor(@QueryDescendents(Marker) dependencies:QueryList<Maker>) {
    }
  }
  ```
  
  This directive would be instantiated with a Query which would contain `Dependency` 4, 5 and 6.
  
  ### Optional injection
  
  The normal behavior of directives is to return an error when a specified dependency cannot be resolved. If you
  would like to inject `null` on unresolved dependency instead, you can annotate that dependency with `@Optional()`.
  This explicitly permits the author of a template to treat some of the surrounding directives as optional.
  
  ```
  @Decorator({ selector: '[my-directive]' })
  class MyDirective {
    constructor(@Optional() dependency:Dependency) {
    }
  }
  ```
  
  This directive would be instantiated with a `Dependency` directive found on the current element. If none can be
  found, the injector supplies `null` instead of throwing an error.
  
.l-main-section
  h2 Members
  .l-sub-section
    h3 constructor

    
    pre.prettyprint
      code.
        constructor({
          selector,
          properties,
          events,
          hostListeners,
          lifecycle
        }:{
          selector:string,
          properties:any,
          events:List,
          hostListeners: any,
          lifecycle:List
        }={})
    
    :markdown
      




  .l-sub-section
    h3 events

    
    :markdown
      Enumerates the set of emitted events.
      
      ## Syntax
      
      ```
      @Component({
        events: ['statusChange']
      })
      class TaskComponent {
        statusChange:EventEmitter;
      
        constructor() {
          this.statusChange = new EventEmitter();
        }
      
        onComplete() {
          this.statusChange.next('completed');
        }
      }
      ```





  .l-sub-section
    h3 hasLifecycleHook

    
    pre.prettyprint
      code.
        hasLifecycleHook(hook:string)
    
    :markdown
      Returns true if a directive participates in a given `LifecycleEvent`.
      
      See <a href="onChange-var.html"><code>onChange</code></a>, <a href="onDestroy-var.html"><code>onDestroy</code></a>, <a href="onAllChangesDone-var.html"><code>onAllChangesDone</code></a> for details.





  .l-sub-section
    h3 hostListeners

    
    :markdown
      Specifies which DOM hostListeners a directive listens to.
      
      The `hostListeners` property defines a set of `event` to `method` key-value pairs:
      
      - `event1`: the DOM event that the directive listens to.
      - `statement`: the statement to execute when the event occurs.
      If the evalutation of the statement returns `false`, then `preventDefault`is applied on the DOM event.
      
      To listen to global events, a target must be added to the event name.
      The target can be `window`, `document` or `body`.
      
      When writing a directive event binding, you can also refer to the following local variables:
      - `$event`: Current event object which triggered the event.
      - `$target`: The source of the event. This will be either a DOM element or an Angular directive.
        (will be implemented in later release)
      
      
      ## Syntax
      
      ```
      @Directive({
        hostListeners: {
          'event1': 'onMethod1(arguments)',
          'target:event2': 'onMethod2(arguments)',
          ...
        }
      }
      ```
      
      ## Basic Event Binding:
      
      Suppose you want to write a directive that triggers on `change` events in the DOM and on `resize` events in window.
      You would define the event binding as follows:
      
      ```
      @Decorator({
        selector: 'input',
        hostListeners: {
          'change': 'onChange($event)',
          'window:resize': 'onResize($event)'
        }
      })
      class InputDecorator {
        onChange(event:Event) {
        }
        onResize(event:Event) {
        }
      }
      ```
      
      Here the `onChange` method of `InputDecorator` is invoked whenever the DOM element fires the 'change' event.





  .l-sub-section
    h3 lifecycle

    
    :markdown
      Specifies a set of lifecycle hostListeners in which the directive participates.
      
      See <a href="onChange-var.html"><code>onChange</code></a>, <a href="onDestroy-var.html"><code>onDestroy</code></a>, <a href="onAllChangesDone-var.html"><code>onAllChangesDone</code></a> for details.





  .l-sub-section
    h3 properties

    
    :markdown
      Enumerates the set of properties that accept data binding for a directive.
      
      The `properties` property defines a set of `directiveProperty` to `bindingProperty`
      key-value pairs:
      
      - `directiveProperty` specifies the component property where the value is written.
      - `bindingProperty` specifies the DOM property where the value is read from.
      
      You can include a <a href="../pipes/Pipe-class.html"><code>Pipe</code></a> when specifying a `bindingProperty` to allow for data transformation and structural
      change detection of the value. These pipes will be evaluated in the context of this component.
      
      
      ## Syntax
      
      ```
      @Directive({
        properties: {
          'directiveProperty1': 'bindingProperty1',
          'directiveProperty2': 'bindingProperty2 | pipe1 | ...',
          ...
        }
      }
      ```
      
      
      ## Basic Property Binding
      
      We can easily build a simple `Tooltip` directive that exposes a `tooltip` property, which can be used in templates
      with standard Angular syntax. For example:
      
      ```
      @Decorator({
        selector: '[tooltip]',
        properties: {
          'text': 'tooltip'
        }
      })
      class Tooltip {
        set text(text) {
          // This will get called every time the 'tooltip' binding changes with the new value.
        }
      }
      ```
      
      We can then bind to the `tooltip' property as either an expression (`someExpression`) or as a string literal, as
      shown in the HTML template below:
      
      ```html
      <div [tooltip]="someExpression">...</div>
      <div tooltip="Some Text">...</div>
      ```
      
      Whenever the `someExpression` expression changes, the `properties` declaration instructs
      Angular to update the `Tooltip`'s `text` property.
      
      
      
      ## Bindings With Pipes
      
      You can also use pipes when writing binding definitions for a directive.
      
      For example, we could write a binding that updates the directive on structural changes, rather than on reference
      changes, as normally occurs in change detection.
      
      See <a href="../pipes/Pipe-class.html"><code>Pipe</code></a> and <a href="../pipes/keyValDiff-var.html"><code>keyValDiff</code></a> documentation for more details.
      
      ```
      @Decorator({
        selector: '[class-set]',
        properties: {
          'classChanges': 'classSet | keyValDiff'
        }
      })
      class ClassSet {
        set classChanges(changes:KeyValueChanges) {
          // This will get called every time the `class-set` expressions changes its structure.
        }
      }
      ```
      
      The template that this directive is used in may also contain its own pipes. For example:
      
      ```html
      <div [class-set]="someExpression | somePipe">
      ```
      
      In this case, the two pipes compose as if they were inlined: `someExpression | somePipe | keyValDiff`.





  .l-sub-section
    h3 selector

    
    :markdown
      The CSS selector that triggers the instantiation of a directive.
      
      Angular only allows directives to trigger on CSS selectors that do not cross element boundaries.
      
      `selector` may be declared as one of the following:
      
      - `element-name`: select by element name.
      - `.class`: select by class name.
      - `[attribute]`: select by attribute name.
      - `[attribute=value]`: select by attribute name and value.
      - `:not(sub_selector)`: select only if the element does not match the `sub_selector`.
      - `selector1, selector2`: select if either `selector1` or `selector2` matches.
      
      
      
      
      Suppose we have a directive with an `input[type=text]` selector.
      
      And the following HTML:
      
      ```html
      <form>
        <input type="text">
        <input type="radio">
      <form>
      ```
      
      The directive would only be instantiated on the `<input type="text">` element.