angular.directive.ng:controller.html

<h1>angular.directive.ng:controller</h1>
<div class="angular-directive-ng-controller"><fieldset class="workInProgress"><legend>Work in Progress</legend>
This page is currently being revised. It might be incomplete or contain inaccuracies.</fieldset>
<h2>Description</h2>
<div class="description"><p>To support the Model-View-Controller design pattern, it is possible 
to assign behavior to a scope through <code>ng:controller</code>. The scope is 
the MVC model. The HTML (with data bindings) is the MVC view. 
The <code>ng:controller</code> directive specifies the MVC controller class</p></div>
<h2>Dependencies</h2>
<ul class="dependencies"></ul>
<h2>Usage</h2>
<div class="usage"><pre class="brush: js; html-script: true;">&lt;ANY ng:controller="expression"&gt;
   ...
&lt;/ANY&gt;</pre>
<h3>Parameters</h3>
<ul class="parameters"><li><code ng:non-bindable="">expression – {expression} – </code>
<p>to eval.</p></li>
</ul>
</div>
<h2>Example</h2>
<div class="example"><doc:example><doc:source>&lt;script type="text/javascript"&gt;
  function SettingsController() {
    this.name = "John Smith";
    this.contacts = [
      {type:'phone', value:'408 555 1212'},
      {type:'email', value:'john.smith@example.org'} ];
  }
  SettingsController.prototype = {
   greet: function(){
     alert(this.name);
   },
   addContact: function(){
     this.contacts.push({type:'email', value:'yourname@example.org'});
   },
   removeContact: function(contactToRemove) {
     angular.Array.remove(this.contacts, contactToRemove);
   },
   clearContact: function(contact) {
     contact.type = 'phone';
     contact.value = '';
   }
  };
&lt;/script&gt;
&lt;div ng:controller="SettingsController"&gt;
  Name: &lt;input type="text" name="name"/&gt; 
  [ &lt;a href="" ng:click="greet()"&gt;greet&lt;/a&gt; ]&lt;br/&gt;
  Contact:
  &lt;ul&gt;
    &lt;li ng:repeat="contact in contacts"&gt;
      &lt;select name="contact.type"&gt;
         &lt;option&gt;phone&lt;/option&gt;
         &lt;option&gt;email&lt;/option&gt;
      &lt;/select&gt;
      &lt;input type="text" name="contact.value"/&gt;
      [ &lt;a href="" ng:click="clearContact(contact)"&gt;clear&lt;/a&gt; 
      | &lt;a href="" ng:click="removeContact(contact)"&gt;X&lt;/a&gt; ]
    &lt;/li&gt;
    &lt;li&gt;[ &lt;a href="" ng:click="addContact()"&gt;add&lt;/a&gt; ]&lt;/li&gt;
 &lt;/ul&gt;
&lt;/div&gt;</doc:source>
</doc:example>
</div>
</div>