mirror of
https://github.com/Hopiu/angular.js.git
synced 2026-03-17 15:40:22 +00:00
47 lines
2.2 KiB
Text
47 lines
2.2 KiB
Text
@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}
|