` or any other element with the
* `tooltip` selector,
* like so:
- *
+ *
* ```
*
* ```
- *
+ *
* Directives can also control the instantiation, destruction, and positioning of inline template
* elements:
- *
- * A directive uses a
ViewContainerRef to instantiate, insert, move, and destroy views at
+ *
+ * A directive uses a {@link ViewContainerRef} to instantiate, insert, move, and destroy views at
* runtime.
- * The
ViewContainerRef is created as a result of `
` element, and represents a
+ * The {@link ViewContainerRef} is created as a result of `` element, and represents a
* location in the current view
* where these actions are performed.
- *
- * Views are always created as children of the current View, and as siblings of the
+ *
+ * Views are always created as children of the current {@link View}, and as siblings of the
* `` element. Thus a
* directive in a child view cannot inject the directive that created it.
- *
+ *
* Since directives that create views via ViewContainers are common in Angular, and using the full
* `` element syntax is wordy, Angular
* also supports a shorthand notation: `` and `` are
* equivalent.
- *
+ *
* Thus,
- *
+ *
* ```
*
* ```
- *
+ *
* Expands in use to:
- *
+ *
* ```
*
*
@@ -2020,18 +1679,18 @@ declare module "angular2/angular2" {
*
*
* ```
- *
+ *
* Notice that although the shorthand places `*foo="bar"` within the `` element, the binding for
* the directive
* controller is correctly instantiated on the `` element rather than the `` element.
- *
- *
+ *
+ *
* ## Example
- *
+ *
* Let's suppose we want to implement the `unless` behavior, to conditionally include a template.
- *
+ *
* Here is a simple directive that triggers on an `unless` selector:
- *
+ *
* ```
* @Directive({
* selector: '[unless]',
@@ -2041,13 +1700,13 @@ declare module "angular2/angular2" {
* viewContainer: ViewContainerRef;
* protoViewRef: ProtoViewRef;
* prevCondition: boolean;
- *
+ *
* constructor(viewContainer: ViewContainerRef, protoViewRef: ProtoViewRef) {
* this.viewContainer = viewContainer;
* this.protoViewRef = protoViewRef;
* this.prevCondition = null;
* }
- *
+ *
* set unless(newCondition) {
* if (newCondition && (isBlank(this.prevCondition) || !this.prevCondition)) {
* this.prevCondition = true;
@@ -2059,17 +1718,17 @@ declare module "angular2/angular2" {
* }
* }
* ```
- *
+ *
* We can then use this `unless` selector in a template:
* ```
*
* ```
- *
+ *
* Once the directive instantiates the child view, the shorthand notation for the template expands
* and the result is:
- *
+ *
* ```
*
*
@@ -2078,237 +1737,66 @@ declare module "angular2/angular2" {
*
*
* ```
- *
+ *
* Note also that although the `` template still exists inside the ``,
* the instantiated
* view occurs on the second `` which is a sibling to the `` element.
- *
- * @exportedAs angular2/annotations
*/
- function Directive(arg: _DirectiveArg): (target: any) => any;
- interface _DirectiveArg {
-
- /**
- * If set to true the compiler does not compile the children of this directive.
- */
- compileChildren?: boolean;
-
- /**
- * Enumerates the set of emitted events.
- *
- * ## Syntax
- *
- * ```
- * @Component({
- * events: ['statusChange']
- * })
- * class TaskComponent {
- * statusChange:EventEmitter;
- *
- * constructor() {
- * this.statusChange = new EventEmitter();
- * }
- *
- * onComplete() {
- * this.statusChange.next('completed');
- * }
- * }
- * ```
- */
- events?: List;
-
- /**
- * Specifies which DOM methods a directive can invoke.
- *
- * ## Syntax
- *
- * ```
- * @Directive({
- * selector: 'input',
- * hostActions: {
- * 'emitFocus': 'focus()'
- * }
- * })
- * class InputDirective {
- * constructor() {
- * this.emitFocus = new EventEmitter();
- * }
- *
- * focus() {
- * this.emitFocus.next();
- * }
- * }
- *
- * In this example calling focus on InputDirective will result in calling focus on the DOM
- * element.
- * ```
- */
- hostActions?: StringMap;
-
- /**
- * Specifies static attributes that should be propagated to a host element. Attributes specified
- * in `hostAttributes`
- * are propagated only if a given attribute is not present on a host element.
- *
- * ## Syntax
- *
- * ```
- * @Directive({
- * selector: '[my-button]',
- * hostAttributes: {
- * 'role': 'button'
- * }
- * })
- * class MyButton {
- * }
- *
- * In this example using `my-button` directive (ex.: ``) on a host element
- * (here: `` )
- * will ensure that this element will get the "button" role.
- * ```
- */
- hostAttributes?: StringMap
;
-
- /**
- * Defines the set of injectable objects that are visible to a Directive and its light dom
- * children.
- *
- * ## Simple Example
- *
- * Here is an example of a class that can be injected:
- *
- * ```
- * class Greeter {
- * greet(name:string) {
- * return 'Hello ' + name + '!';
- * }
- * }
- *
- * @Directive({
- * selector: 'greet',
- * hostInjector: [
- * Greeter
- * ]
- * })
- * class HelloWorld {
- * greeter:Greeter;
- *
- * constructor(greeter:Greeter) {
- * this.greeter = greeter;
- * }
- * }
- * ```
- */
- hostInjector?: List;
+ class DirectiveAnnotation extends InjectableMetadata {
- /**
- * 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:
- *
- * ```
- * @Directive({
- * selector: 'input',
- * hostListeners: {
- * 'change': 'onChange($event)',
- * 'window:resize': 'onResize($event)'
- * }
- * })
- * class InputDirective {
- * onChange(event:Event) {
- * }
- * onResize(event:Event) {
- * }
- * }
- * ```
- *
- * Here the `onChange` method of `InputDirective` is invoked whenever the DOM element fires the
- * 'change' event.
- */
- hostListeners?: StringMap;
/**
- * Specifies which DOM properties a directives updates.
- *
- * ## Syntax
- *
- * ```
- * @Directive({
- * selector: 'input',
- * hostProperties: {
- * 'value': 'value'
- * }
- * })
- * class InputDirective {
- * value:string;
- * }
- *
- * In this example every time the value property of the decorator changes, Angular will update the
- * value property of
- * the host element.
+ * 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.
+ *
+ *
+ * ## Example
+ *
+ * Suppose we have a directive with an `input[type=text]` selector.
+ *
+ * And the following HTML:
+ *
+ * ```html
+ *