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>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><a href="#!guide.expression">Expression</a> to eval.</p></li>
</ul>
</div>
<h2>Example</h2>
<div class="example"><p>Here is a simple form for editing the user contact information. Adding, removing clearing and
greeting are methods which are declared on the controller (see source tab). These methods can
easily be called from the angular markup. Notice that the scope becomes the controller's class
this. This allows for easy access to the view data from the controller. Also notice that any
changes to the data are automatically reflected in the view without the need to update it
manually.</p><doc:example>
     <pre class="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;
     </pre>
     <pre class="doc-scenario">
       it('should check controller', function(){
         expect(element('.doc-example-live div&gt;:input').val()).toBe('John Smith');
         expect(element('.doc-example-live li[ng\\:repeat-index="0"] input').val()).toBe('408 555 1212');
         expect(element('.doc-example-live li[ng\\:repeat-index="1"] input').val()).toBe('john.smith@example.org');
         element('.doc-example-live li:first a:contains("clear")').click();
         expect(element('.doc-example-live li:first input').val()).toBe('');
         element('.doc-example-live li:last a:contains("add")').click();
         expect(element('.doc-example-live li[ng\\:repeat-index="2"] input').val()).toBe('yourname@example.org');
       });
     </pre>
   </doc:example></div>
</div>