diff options
Diffstat (limited to 'docs/content/guide/dev_guide.compiler.directives.ngdoc')
| -rw-r--r-- | docs/content/guide/dev_guide.compiler.directives.ngdoc | 61 |
1 files changed, 61 insertions, 0 deletions
diff --git a/docs/content/guide/dev_guide.compiler.directives.ngdoc b/docs/content/guide/dev_guide.compiler.directives.ngdoc new file mode 100644 index 00000000..f853d5e8 --- /dev/null +++ b/docs/content/guide/dev_guide.compiler.directives.ngdoc @@ -0,0 +1,61 @@ +@workInProgress +@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 name="button1" ng:click="foo()">Click This</button> + + +In the example above, `name` is the standard HTML attribute, and `ng:click` is the angular +directive. The `ng:click` directive lets you implement custom behavior in an associated controller +function. + + +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 expression in the model, the view is updated to display the span text with the changed +expression value. + + + + +## 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} |
