docs/content/guide/dev_guide.compiler.directives.ngdoc


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

@ngdoc overview
@name Developer Guide: Angular HTML Compiler: Understanding Angular Directives
@description

An angular directive is a custom HTML attribute that angular knows how to process.  You add them to
a template element like any other attribute.  Angular directives all have a `ng:` prefix.  In the
following example, the angular directive (`ng:controller`) is  a div tag:

        <div ng:controller>

You use angular directives to modify DOM element properties. The element you modify can be an
existing HTML element type or a custom DOM element type that you created. You can use any number of
directives per element.

You add angular directives to a standard HTML tag as in the following example, in which we have
added the {@link api/angular.directive.ng:click ng:click} directive to a button tag:

        <button ng:click="foo()">Click This</button>

The `ng:click` directive lets you specify click event handlers directly in the template. Unlike the
evil `onclick` attribute, the expression associated with the `ng:click` directive is always executed
in the context of the current angular scope.

In the next example, we add the {@link api/angular.directive.ng:bind ng:bind} directive to a
`<span>` tag:

        <span ng:bind="1+2"></span>

The `ng:bind` directive tells angular to set up {@link dev_guide.templates.databinding data
binding} between the data model and the view for the specified expression.  When the angular {@link
dev_guide.compiler compiler} encounters an `ng:bind` directive in a template, it passes the
attribute value to the `ng:bind` function, which in turn sets up the data binding. On any change to
the model that would change the result of the expression, the view is updated and the text of the
span element will reflect the new value. In the example above, the model is represented by two
constants, so nothing will ever change - Sorry!


## Related Topics

* {@link dev_guide.compiler Angular HTML Compiler}
* {@link dev_guide.compiler.directives.creating_directives Creating Angular Directives}
* {@link dev_guide.compiler.directives_widgets Comparing Directives and Widgets}

## Related API:

* {@link api/angular.directive Directive API}
* {@link api/angular.widget Widget API}