angular.widget.html

<h1>angular.widget</h1>
<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>Widgets allow you to create DOM elements that the browser doesn't 
already understand. You create the widget in your namespace and 
assign it behavior. You can only bind one widget per DOM element 
(unlike directives, in which you can use any number per DOM 
element). Widgets are expected to manipulate the DOM tree by 
adding new elements whereas directives are expected to only modify
element properties.</p>

<p>Widgets come in two flavors: element and attribute.</p>

<h2>Element Widget</h2>

<p>Let's say we would like to create a new element type in the 
namespace <code>my</code> that can watch an expression and alert() the user 
with each new value.</p><div ng:non-bindable><pre class="brush: js; html-script: true;">
&lt;my:watch exp="name"/&gt;
</pre></div><p>You can implement <code>my:watch</code> like this:</p><div ng:non-bindable><pre class="brush: js; html-script: true;">
angular.widget('my:watch', function(compileElement) {
  var compiler = this;
  var exp = compileElement.attr('exp');
  return function(linkElement) {
    var currentScope = this;
    currentScope.$watch(exp, function(value){
      alert(value);
    }};
  };
});
</pre></div><h2>Attribute Widget</h2>

<p>Let's implement the same widget, but this time as an attribute 
that can be added to any existing DOM element.</p><div ng:non-bindable><pre class="brush: js; html-script: true;">
&lt;div my-watch="name"&gt;text&lt;/div&gt;
</pre></div><p>You can implement <code>my:watch</code> attribute like this:</p><div ng:non-bindable><pre class="brush: js; html-script: true;">
angular.widget('@my:watch', function(expression, compileElement) {
  var compiler = this;
  return function(linkElement) {
    var currentScope = this;
    currentScope.$watch(expression, function(value){
      alert(value);
    });
  };
});
</pre></div>
<h2>Example</h2>
<doc:example>
  <doc:source>
&lt;script&gt;
  angular.widget('my:time', function(compileElement){
    compileElement.css('display', 'block');
    return function(linkElement){
      function update(){
        linkElement.text('Current time is: ' + new Date());
        setTimeout(update, 1000);
      }
      update();
    };
  });
&lt;/script&gt;
&lt;my:time&gt;&lt;/my:time&gt;
  </doc:source>
  <doc:scenario></doc:scenario>
</doc:example>