mirror of
https://github.com/Hopiu/angular.js.git
synced 2026-03-16 23:30:23 +00:00
adding docs for angular.markup and angular.attrMarkup
This commit is contained in:
parent
9f6c5db2a6
commit
ae20f0c1b3
3 changed files with 83 additions and 0 deletions
15
docs/angular.attrMarkup.ngdoc
Normal file
15
docs/angular.attrMarkup.ngdoc
Normal 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
66
docs/angular.markup.ngdoc
Normal 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.
|
||||
|
|
@ -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'),
|
||||
|
|
|
|||
Loading…
Reference in a new issue