adding docs for angular.markup and angular.attrMarkup

This commit is contained in:
Igor Minar 2011-02-06 16:32:37 -08:00
parent 9f6c5db2a6
commit ae20f0c1b3
3 changed files with 83 additions and 0 deletions

View file

@ -0,0 +1,15 @@
@workInProgress
@ngdoc overview
@name angular.attrMarkup
@description
Attribute markup extends the angular compiler in a very similar way as {@link angular.markup} except
that it allows you to modify the state of the attribute text rather then the contest of a node.
<pre>
angular.attrMarkup('extraClass', function(attrValue, attrName, element){
if (attrName == 'additional-class') {
element.addClass(attrValue);
}
});
</pre>

66
docs/angular.markup.ngdoc Normal file
View file

@ -0,0 +1,66 @@
@workInProgress
@ngdoc overview
@name angular.markup
@description
#Overview
Markups allow the angular compiler to transform content of DOM elements or portions of this content
into other text or DOM elements for further compilation. Markup extensions do not themselves produce
linking functions. Think of markup as a way to produce shorthand for a {@link angular.widget widget}
or a {@link angular.directive directive}.
#`{{}}` (double curly) built-in markup
`{{}}` markup is a built-in markup, which translates the enclosed expression into an
{@link angular.directive.ng:bind ng:bind} directive. It simply transforms
<pre>
{{expression}}
</pre>
to:
<pre>
<span ng:bind="expression"></span>
</pre>
For example `{{1+2}}` is easier to write and understand than `<span ng:bind="1+2"></span>`. The
expanded elements are then {@link guide.compiler compiled} normally.
# Custom markup
Let's say you want to define this shorthand for a horizontal rule: `---` for `<hr/>`.
In other words, this HTML:
<pre>
header
---
footer
</pre>
should translate to:
<pre>
header
<hr/>
footer
</pre>
Here's how the angular compiler could be extended to achieve this:
<pre>
angular.markup('---', function(text, textNode, parentElement) {
var compiler = this;
var index = text.indexOf('---');
if (index > -1) {
var before = compiler.text(text.substring(0, index));
var hr = compiler.element('hr');
var after = compiler.text(text.substring(index + 3));
textNode.after(after);
textNode.after(hr);
textNode.after(before);
textNode.remove();
}
});
</pre>
Unlike {@link angular.widget widgets} and {@link angular.directive directives}, in which the
compiler matches the name of handler function to a DOM element or attribute name, for markup 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.

View file

@ -94,7 +94,9 @@ var _undefined = undefined,
/** @name angular */
angular = window[$angular] || (window[$angular] = {}),
/** @name angular.markup */
angularTextMarkup = extensionMap(angular, 'markup'),
/** @name angular.attrMarkup */
angularAttrMarkup = extensionMap(angular, 'attrMarkup'),
/** @name angular.directive */
angularDirective = extensionMap(angular, 'directive'),