diff options
| author | Igor Minar | 2011-06-15 22:32:24 -0700 |
|---|---|---|
| committer | Igor Minar | 2011-06-15 22:32:24 -0700 |
| commit | 3c87611188fc1612fe5d07e245a992b25146f2bf (patch) | |
| tree | 3a08e9ee80ab7abdd2b516f66e62ddb7554d6954 /docs/content/guide/dev_guide.compiler.extending_compiler.ngdoc | |
| parent | b842642b574a2b95c53b791308ed1bf8ff9d304d (diff) | |
| download | angular.js-3c87611188fc1612fe5d07e245a992b25146f2bf.tar.bz2 | |
docs - various doc fixes
Diffstat (limited to 'docs/content/guide/dev_guide.compiler.extending_compiler.ngdoc')
| -rw-r--r-- | docs/content/guide/dev_guide.compiler.extending_compiler.ngdoc | 53 |
1 files changed, 23 insertions, 30 deletions
diff --git a/docs/content/guide/dev_guide.compiler.extending_compiler.ngdoc b/docs/content/guide/dev_guide.compiler.extending_compiler.ngdoc index ff507630..88a9a470 100644 --- a/docs/content/guide/dev_guide.compiler.extending_compiler.ngdoc +++ b/docs/content/guide/dev_guide.compiler.extending_compiler.ngdoc @@ -3,61 +3,54 @@ @name Developer Guide: Angular HTML Compiler: Extending the Angular Compiler @description - Let's say that we want to create a new DOM element called `<my:greeter/>` that displays a greeting. We want this HTML source: - <pre> -<div ng:init="salutation='Hello'; name='World'"> -<my:greeter salutation="salutation" name="name"/> -</div> + <div ng:init="s='Hello'; n='World'"> + <my:greeter salutation="s" name="n"/> + </div> </pre> - to produce this DOM: - <pre> -<div ng:init="salutation='Hello'; name='World'"> -<my:greeter salutation="salutation" name="name"/> +<div ng:init="s='Hello'; n='World'"> +<my:greeter salutation="s" name="n"/> <span class="salutation">Hello</span> <span class="name">World</span>! </my:greeter> </div> </pre> - That is, the new `<my:greeter/>` tag's `salutation` and `name` attributes should be transformed by the compiler such that two `<span>` tags display the values of the attributes, with CSS classes applied to the output. - The following code snippet shows how to write a following widget definition that will be processed by the compiler. Note that you have to declare the {@link dev_guide.bootstrap namespace} `my` in the page: - <pre> angular.widget('my:greeter', function(compileElement){ -var compiler = this; -compileElement.css('display', 'block'); -var salutationExp = compileElement.attr('salutation'); -var nameExp = compileElement.attr('name'); -return function(linkElement){ - var salutationSpan = angular.element('<span class="salutation"></span'); - var nameSpan = angular.element('<span class="name"></span>'); - linkElement.append(salutationSpan); - linkElement.append(compiler.text(' ')); - linkElement.append(nameSpan); - linkElement.append(compiler.text('!')); - this.$watch(salutationExp, function(value){ - salutationSpan.text(value); - }); - this.$watch(nameExp, function(value){ - nameSpan.text(value); - }); -}; + var compiler = this; + compileElement.css('display', 'block'); + var salutationExp = compileElement.attr('salutation'); + var nameExp = compileElement.attr('name'); + return function(linkElement){ + var salutationSpan = angular.element('<span class="salutation"></span'); + var nameSpan = angular.element('<span class="name"></span>'); + linkElement.append(salutationSpan); + linkElement.append(compiler.text(' ')); + linkElement.append(nameSpan); + linkElement.append(compiler.text('!')); + this.$watch(salutationExp, function(value){ + salutationSpan.text(value); + }); + this.$watch(nameExp, function(value){ + nameSpan.text(value); + }); + }; }); </pre> |
