diff options
Diffstat (limited to 'docs/content/guide/dev_guide.compiler.markup.ngdoc')
| -rw-r--r-- | docs/content/guide/dev_guide.compiler.markup.ngdoc | 24 | 
1 files changed, 0 insertions, 24 deletions
| diff --git a/docs/content/guide/dev_guide.compiler.markup.ngdoc b/docs/content/guide/dev_guide.compiler.markup.ngdoc index 64a3940b..a6f43586 100644 --- a/docs/content/guide/dev_guide.compiler.markup.ngdoc +++ b/docs/content/guide/dev_guide.compiler.markup.ngdoc @@ -3,59 +3,46 @@  @name Developer Guide: Angular HTML Compiler: Understanding Angular Markup  @description -  Markup in angular is a feature that you can use in templates to transform the content of DOM  elements prior to the compile phase (in which elements are compiled and link functions are  returned.  See the {@link dev_guide.compiler compiler docs} for details on how the compiler  works.)  The ability to make pre-compile changes to DOM elements lets you create shorthand for  {@link api/angular.widget widget} and {@link api/angular.directive directive} declarations. -  Angular provides one built-in markup feature: the double curly-braces used to declare binding  points (between the model and view) for angular expressions.  You can also create your own custom  markup. -  # Using Double Curly-brace Markup (`{{ }}`) -  The double curly-brace (`{{ }}`) markup translates an enclosed expression into an {@link  api/angular.directive.ng:bind ng:bind} directive: -  <pre>  {{expression}}  </pre> -  is transformed to: -  <pre>  <span ng:bind="expression"></span>  </pre> -  Markup is useful for the simple reason that `{{1+2}}` is easier to write and understand than `<span  ng:bind="1+2"></span>`. After markup shorthand is expanded into the DOM elements it represents, the  expanded elements are then {@link dev_guide.compiler compiled} normally. - -  # Creating Custom Markup -  Let's say you want to define markup that transforms `---` into a horizontal rule (`<hr/>`): -  <pre>  header  ---  footer  </pre> -  should translate to:  <pre>  header @@ -63,10 +50,8 @@ header  footer  </pre> -  Here is how you could extend the angular compiler to create the "---" markup: -  <pre>  angular.markup('---', function(text, textNode, parentElement) {      var compiler = this; @@ -83,20 +68,16 @@ angular.markup('---', function(text, textNode, parentElement) {  });  </pre> -  Unlike the way the compiler processes {@link api/angular.widget widgets} and {@link  api/angular.directive directives} (matching the name of the handler function to a DOM element or  attribute name), the compiler calls every markup handler for every text node, giving the handler a  chance to transform the text. The markup handler needs to find all the matches in the text. -  ## Attribute Markup -  Attribute markup extends the angular compiler in a very similar way to markup, except that it  allows you to modify the state of attribute text rather then the content of a node. -  <pre>  angular.attrMarkup('extraClass', function(attrValue, attrName, element){   if (attrName == 'additional-class') { @@ -106,15 +87,10 @@ angular.attrMarkup('extraClass', function(attrValue, attrName, element){  </pre> - -  ## Related Topics -  * {@link dev_guide.compiler Angular HTML Compiler} -  ## Related API -  * {@link api/angular.compile Compiler API Reference} | 
