diff options
Diffstat (limited to '3rdparty/js/angular-1.0.2/docs/partials/api/ng.directive:ngController.html')
| -rw-r--r-- | 3rdparty/js/angular-1.0.2/docs/partials/api/ng.directive:ngController.html | 120 |
1 files changed, 120 insertions, 0 deletions
diff --git a/3rdparty/js/angular-1.0.2/docs/partials/api/ng.directive:ngController.html b/3rdparty/js/angular-1.0.2/docs/partials/api/ng.directive:ngController.html new file mode 100644 index 000000000..5598780d9 --- /dev/null +++ b/3rdparty/js/angular-1.0.2/docs/partials/api/ng.directive:ngController.html @@ -0,0 +1,120 @@ +<h1><code ng:non-bindable="">ngController</code> +<span class="hint">(directive in module <code ng:non-bindable="">ng</code> +)</span> +</h1> +<div><h2 id="Description">Description</h2> +<div class="description"><p>The <code>ngController</code> directive assigns behavior to a scope. This is a key aspect of how angular +supports the principles behind the Model-View-Controller design pattern.</p> + +<p>MVC components in angular:</p> + +<ul> +<li>Model — The Model is data in scope properties; scopes are attached to the DOM.</li> +<li>View — The template (HTML with data bindings) is rendered into the View.</li> +<li>Controller — The <code>ngController</code> directive specifies a Controller class; the class has +methods that typically express the business logic behind the application.</li> +</ul> + +<p>Note that an alternative way to define controllers is via the <code><a href="api/ng.$route"><code>ng.$route</code></a></code> +service.</p></div> +<h2 id="Usage">Usage</h2> +<div class="usage">as attribute<pre class="prettyprint linenums"><ANY ng-controller="{expression}"> + ... +</ANY></pre> +as class<pre class="prettyprint linenums"><ANY class="ng-controller: {expression};"> + ... +</ANY></pre> +<h3 id="Directive.info">Directive info</h3> +<div class="directive-info"><ul><li>This directive creates new scope.</li> +</ul> +</div> +<h3 id="Parameters">Parameters</h3> +<ul class="parameters"><li><code ng:non-bindable="">ngController – {expression} – </code> +<p>Name of a globally accessible constructor function or an +<a href="guide/expression">expression</a> that on the current scope evaluates to a +constructor function.</p></li> +</ul> +</div> +<h2 id="Example">Example</h2> +<div class="example"><p>Here is a simple form for editing user contact information. Adding, removing, clearing, and +greeting are methods declared on the controller (see source tab). These methods can +easily be called from the angular markup. Notice that the scope becomes the <code>this</code> for the +controller's instance. 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 +for a manual update. + <h4>Source</h4> +<div source-edit="" source-edit-deps="angular.js script.js" source-edit-html="index.html-116" source-edit-css="" source-edit-js="script.js-115" source-edit-unit="" source-edit-scenario="scenario.js-117"></div> +<div class="tabbable"><div class="tab-pane" title="index.html"> +<pre class="prettyprint linenums" ng-set-text="index.html-116" ng-html-wrap=" angular.js script.js"></pre> +<script type="text/ng-template" id="index.html-116"> + + <div ng-controller="SettingsController"> + Name: <input type="text" ng-model="name"/> + [ <a href="" ng-click="greet()">greet</a> ]<br/> + Contact: + <ul> + <li ng-repeat="contact in contacts"> + <select ng-model="contact.type"> + <option>phone</option> + <option>email</option> + </select> + <input type="text" ng-model="contact.value"/> + [ <a href="" ng-click="clearContact(contact)">clear</a> + | <a href="" ng-click="removeContact(contact)">X</a> ] + </li> + <li>[ <a href="" ng-click="addContact()">add</a> ]</li> + </ul> + </div> + </script> +</div> +<div class="tab-pane" title="script.js"> +<pre class="prettyprint linenums" ng-set-text="script.js-115"></pre> +<script type="text/ng-template" id="script.js-115"> + function SettingsController($scope) { + $scope.name = "John Smith"; + $scope.contacts = [ + {type:'phone', value:'408 555 1212'}, + {type:'email', value:'john.smith@example.org'} ]; + + $scope.greet = function() { + alert(this.name); + }; + + $scope.addContact = function() { + this.contacts.push({type:'email', value:'yourname@example.org'}); + }; + + $scope.removeContact = function(contactToRemove) { + var index = this.contacts.indexOf(contactToRemove); + this.contacts.splice(index, 1); + }; + + $scope.clearContact = function(contact) { + contact.type = 'phone'; + contact.value = ''; + }; + } + </script> +</div> +<div class="tab-pane" title="End to end test"> +<pre class="prettyprint linenums" ng-set-text="scenario.js-117"></pre> +<script type="text/ng-template" id="scenario.js-117"> + it('should check controller', function() { + expect(element('.doc-example-live div>:input').val()).toBe('John Smith'); + expect(element('.doc-example-live li:nth-child(1) input').val()) + .toBe('408 555 1212'); + expect(element('.doc-example-live li:nth-child(2) 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:nth-child(3) input').val()) + .toBe('yourname@example.org'); + }); + </script> +</div> +</div><h4>Demo</h4> +<div class="well doc-example-live" ng-embed-app="" ng-set-html="index.html-116" ng-eval-javascript="script.js-115"></div></div> +</div> |