angular.markup.html

<h1>angular.markup</h1>
<div class="angular-markup"><fieldset class="workInProgress"><legend>Work in Progress</legend>
This page is currently being revised. It might be incomplete or contain inaccuracies.</fieldset>
<h2>Overview</h2>

<p>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 <a href="#!angular.widget"><code>widget</code></a>
 or a <a href="#!angular.directive"><code>directive</code></a>.</p>

<h2><code>{{}}</code> (double curly) built-in markup</h2>

<p><code>{{}}</code> markup is a built-in markup, which translates the enclosed expression into an
<a href="#!angular.directive.ng:bind"><code>ng:bind</code></a> directive. It simply transforms</p><div ng:non-bindable><pre class="brush: js; html-script: true;">
{{expression}}
</pre></div><p>to:</p><div ng:non-bindable><pre class="brush: js; html-script: true;">
&lt;span ng:bind="expression"&gt;&lt;/span&gt;
</pre></div><p>For example <code>{{1+2}}</code> is easier to write and understand than <code>&lt;span ng:bind="1+2"&gt;&lt;/span&gt;</code>. The
expanded elements are then <a href="#!guide.compiler">compiled</a> normally.</p>

<h2>Custom markup</h2>

<p>Let's say you want to define this shorthand for a horizontal rule: <code>---</code> for <code>&lt;hr/&gt;</code>.</p>

<p>In other words, this HTML:</p><div ng:non-bindable><pre class="brush: js; html-script: true;">
header
---
footer
</pre></div><p>should translate to:</p><div ng:non-bindable><pre class="brush: js; html-script: true;">
header
&lt;hr/&gt;
footer
</pre></div><p>Here's how the angular compiler could be extended to achieve this:</p><div ng:non-bindable><pre class="brush: js; html-script: true;">
angular.markup('---', function(text, textNode, parentElement) {
  var compiler = this;
  var index = text.indexOf('---');
  if (index &gt; -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></div><p>Unlike <a href="#!angular.widget"><code>widgets</code></a> and <a href="#!angular.directive"><code>directives</code></a>, 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.</p></div>