aboutsummaryrefslogtreecommitdiffstats
path: root/docs/content/guide/dev_guide.compiler.markup.ngdoc
diff options
context:
space:
mode:
Diffstat (limited to 'docs/content/guide/dev_guide.compiler.markup.ngdoc')
-rw-r--r--docs/content/guide/dev_guide.compiler.markup.ngdoc92
1 files changed, 0 insertions, 92 deletions
diff --git a/docs/content/guide/dev_guide.compiler.markup.ngdoc b/docs/content/guide/dev_guide.compiler.markup.ngdoc
deleted file mode 100644
index 0a01da57..00000000
--- a/docs/content/guide/dev_guide.compiler.markup.ngdoc
+++ /dev/null
@@ -1,92 +0,0 @@
-@ngdoc overview
-@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
-<hr/>
-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;
- var index = text.indexOf('---');
- if (index > -1) {
- textNode.after(text.substring(index + 3));
- textNode.after(angular.element('<hr>'));
- textNode.after(text.substring(0, index));
- textNode.remove();
- }
-});
-</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') {
- element.addClass(attrValue);
- }
-});
-</pre>
-
-
-## Related Topics
-
-* {@link dev_guide.compiler Angular HTML Compiler}
-
-## Related API
-
-* {@link api/angular.module.ng.$compile Compiler API Reference}