knowhow-server/public/js/lib/angular-1.2.9/docs/partials/api/ng.directive:ngModel.NgModelController.html

A personal workflow engine that can manage and use any network connected host

<a href="http://github.com/angular/angular.js/tree/v1.2.9/src/ng/directive/input.js#L793" class="view-source btn btn-action"><i class="icon-zoom-in"> </i> View source</a><a href="http://github.com/angular/angular.js/edit/master/src/ng/directive/input.js" class="improve-docs btn btn-primary"><i class="icon-edit"> </i> Improve this doc</a><h1><code ng:non-bindable="">NgModelController</code>
<div><span class="hint">type in module <code ng:non-bindable="">ng</code>
</span>
</div>
</h1>
<div><h2 id="description">Description</h2>
<div class="description"><div class="ng-directive-page ng-directive-ngmodel-ngmodelcontroller-page"><p><code>NgModelController</code> provides API for the <code>ng-model</code> directive. The controller contains
services for data-binding, validation, CSS updates, and value formatting and parsing. It
purposefully does not contain any logic which deals with DOM rendering or listening to
DOM events. Such DOM related logic should be provided by other directives which make use of
<code>NgModelController</code> for data-binding.</p>
<h4 id="description_custom-control-example">Custom Control Example</h4>
<p>This example shows how to use <code>NgModelController</code> with a custom control to achieve
data-binding. Notice how different directives (<code>contenteditable</code>, <code>ng-model</code>, and <code>required</code>)
collaborate together to achieve the desired result.</p>
<p>Note that <code>contenteditable</code> is an HTML5 attribute, which tells the browser to let the element
contents be edited in place by the user.  This will not work on older browsers.</p>
<h4 id="description_source">Source</h4>
<div source-edit="customControl" source-edit-deps="angular.js script.js" source-edit-html="index.html-50" source-edit-css="style.css-48" source-edit-js="script.js-49" source-edit-json="" source-edit-unit="" source-edit-scenario="scenario.js-51" source-edit-protractor=""></div>
<div class="tabbable"><div class="tab-pane" title="index.html">
<pre class="prettyprint linenums" ng-set-text="index.html-50" ng-html-wrap="customControl angular.js script.js"></pre>
<script type="text/ng-template" id="index.html-50">
      <form name="myForm">
       <div contenteditable
            name="myWidget" ng-model="userContent"
            strip-br="true"
            required>Change me!</div>
        <span ng-show="myForm.myWidget.$error.required">Required!</span>
       <hr>
       <textarea ng-model="userContent"></textarea>
      </form>
    </script>
</div>
<div class="tab-pane" title="style.css">
<pre class="prettyprint linenums" ng-set-text="style.css-48"></pre>
<style type="text/css" id="style.css-48">
      [contenteditable] {
        border: 1px solid black;
        background-color: white;
        min-height: 20px;
      }

      .ng-invalid {
        border: 1px solid red;
      }

    </style>
</div>
<div class="tab-pane" title="script.js">
<pre class="prettyprint linenums" ng-set-text="script.js-49"></pre>
<script type="text/ng-template" id="script.js-49">
      angular.module('customControl', []).
        directive('contenteditable', function() {
          return {
            restrict: 'A', // only activate on element attribute
            require: '?ngModel', // get a hold of NgModelController
            link: function(scope, element, attrs, ngModel) {
              if(!ngModel) return; // do nothing if no ng-model

              // Specify how UI should be updated
              ngModel.$render = function() {
                element.html(ngModel.$viewValue || '');
              };

              // Listen for change events to enable binding
              element.on('blur keyup change', function() {
                scope.$apply(read);
              });
              read(); // initialize

              // Write data to the model
              function read() {
                var html = element.html();
                // When we clear the content editable the browser leaves a <br> behind
                // If strip-br attribute is provided then we strip this out
                if( attrs.stripBr && html == '<br>' ) {
                  html = '';
                }
                ngModel.$setViewValue(html);
              }
            }
          };
        });
    </script>
</div>
<div class="tab-pane" title="ngScenario e2e test">
<pre class="prettyprint linenums" ng-set-text="scenario.js-51"></pre>
<script type="text/ng-template" id="scenario.js-51">
      it('should data-bind and become invalid', function() {
        var contentEditable = element('[contenteditable]');

        expect(contentEditable.text()).toEqual('Change me!');
        input('userContent').enter('');
        expect(contentEditable.text()).toEqual('');
        expect(contentEditable.prop('className')).toMatch(/ng-invalid-required/);
      });
    </script>
</div>
</div><h4 id="description_demo">Demo</h4>
<div class="well doc-example-live animate-container" ng-embed-app="customControl" ng-set-html="index.html-50" ng-eval-javascript="script.js-49"></div>
</div></div>
<div class="member method"><h2 id="methods">Methods</h2>
<ul class="methods"><li><h3 id="methods_$render">$render()</h3>
<div class="$render"><div class="ng-directive-page ng-directive-ngmodel-ngmodelcontroller-render-page"><p>Called when the view needs to be updated. It is expected that the user of the ng-model
directive will implement this method.</p>
</div></div>
</li>
<li><h3 id="methods_$setpristine">$setPristine()</h3>
<div class="$setpristine"><div class="ng-directive-page ng-directive-ngmodel-ngmodelcontroller-setpristine-page"><p>Sets the control to its pristine state.</p>
<p>This method can be called to remove the &#39;ng-dirty&#39; class and set the control to its pristine
state (ng-pristine class).</p>
</div></div>
</li>
<li><h3 id="methods_$setvalidity">$setValidity(validationErrorKey, isValid)</h3>
<div class="$setvalidity"><div class="ng-directive-page ng-directive-ngmodel-ngmodelcontroller-setvalidity-page"><p>Change the validity state, and notifies the form when the control changes validity. (i.e. it
does not notify form if given validator is already marked as invalid).</p>
<p>This method should be called by validators - i.e. the parser or formatter functions.</p>
</div><h5 id="methods_$setvalidity_parameters">Parameters</h5><table class="variables-matrix table table-bordered table-striped"><thead><tr><th>Param</th><th>Type</th><th>Details</th></tr></thead><tbody><tr><td>validationErrorKey</td><td><a href="" class="label type-hint type-hint-string">string</a></td><td><div class="ng-directive-page ng-directive-ngmodel-ngmodelcontroller-setvalidity-page"><p>Name of the validator. the <code>validationErrorKey</code> will assign
to <code>$error[validationErrorKey]=isValid</code> so that it is available for data-binding.
The <code>validationErrorKey</code> should be in camelCase and will get converted into dash-case
for class name. Example: <code>myError</code> will result in <code>ng-valid-my-error</code> and <code>ng-invalid-my-error</code>
class and can be bound to as  <code>{{someForm.someControl.$error.myError}}</code> .</p>
</div></td></tr><tr><td>isValid</td><td><a href="" class="label type-hint type-hint-boolean">boolean</a></td><td><div class="ng-directive-page ng-directive-ngmodel-ngmodelcontroller-setvalidity-page"><p>Whether the current state is valid (true) or invalid (false).</p>
</div></td></tr></tbody></table></div>
</li>
<li><h3 id="methods_$setviewvalue">$setViewValue(value)</h3>
<div class="$setviewvalue"><div class="ng-directive-page ng-directive-ngmodel-ngmodelcontroller-setviewvalue-page"><p>Update the view value.</p>
<p>This method should be called when the view value changes, typically from within a DOM event handler.
For example <a href="api/ng.directive:input"><code>input</code></a> and
<a href="api/ng.directive:select"><code>select</code></a> directives call it.</p>
<p>It will update the $viewValue, then pass this value through each of the functions in <code>$parsers</code>,
which includes any validators. The value that comes out of this <code>$parsers</code> pipeline, be applied to
<code>$modelValue</code> and the <strong>expression</strong> specified in the <code>ng-model</code> attribute.</p>
<p>Lastly, all the registered change listeners, in the <code>$viewChangeListeners</code> list, are called.</p>
<p>Note that calling this function does not trigger a <code>$digest</code>.</p>
</div><h5 id="methods_$setviewvalue_parameters">Parameters</h5><table class="variables-matrix table table-bordered table-striped"><thead><tr><th>Param</th><th>Type</th><th>Details</th></tr></thead><tbody><tr><td>value</td><td><a href="" class="label type-hint type-hint-string">string</a></td><td><div class="ng-directive-page ng-directive-ngmodel-ngmodelcontroller-setviewvalue-page"><p>Value from the view.</p>
</div></td></tr></tbody></table></div>
</li>
<li><h3 id="methods_$isempty">$isEmpty()</h3>
<div class="$isempty"><div class="-ng-directive-page -ng-directive-ngmodel-ngmodelcontroller-isempty-page"><p>This is called when we need to determine if the value of the input is empty.</p>
<p>For instance, the required directive does this to work out if the input has data or not.
The default <code>$isEmpty</code> function checks whether the value is <code>undefined</code>, <code>&#39;&#39;</code>, <code>null</code> or <code>NaN</code>.</p>
<p>You can override this for input directives whose concept of being empty is different to the
default. The <code>checkboxInputType</code> directive does this because in its case a value of <code>false</code>
implies empty.</p>
</div></div>
</li>
</ul>
</div>
<div class="member property"><h2 id="properties">Properties</h2>
<ul class="properties"><li><h3 id="properties_$viewvalue">$viewValue</h3>
<div class="$viewvalue"><div class="ng-directive-page ng-directive-ngmodel-ngmodelcontroller-page"><p>Actual string value in the view.</p>
</div></div>
</li>
<li><h3 id="properties_$modelvalue">$modelValue</h3>
<div class="$modelvalue"><div class="ng-directive-page ng-directive-ngmodel-ngmodelcontroller-page"><p>The value in the model, that the control is bound to.</p>
</div></div>
</li>
<li><h3 id="properties_$parsers">$parsers</h3>
<div class="$parsers"><div class="ng-directive-page ng-directive-ngmodel-ngmodelcontroller-page"><p>Array of functions to execute, as a pipeline, whenever
the control reads value from the DOM.  Each function is called, in turn, passing the value
through to the next. Used to sanitize / convert the value as well as validation.
For validation, the parsers should update the validity state using
<a href="api/ng.directive:ngModel.NgModelController#methods_$setvalidity"><code>$setValidity()</code></a>,
and return <code>undefined</code> for invalid values.</p>
</div></div>
</li>
<li><h3 id="properties_$formatters">$formatters</h3>
<div class="$formatters"><div class="ng-directive-page ng-directive-ngmodel-ngmodelcontroller-page"><p>Array of functions to execute, as a pipeline, whenever
the model value changes. Each function is called, in turn, passing the value through to the
next. Used to format / convert values for display in the control and validation.
<pre class="prettyprint linenums">
function formatter(value) {
if (value) {
  return value.toUpperCase();
}
}
ngModel.$formatters.push(formatter);
</pre>
</div></div>
</li>
<li><h3 id="properties_$viewchangelisteners">$viewChangeListeners</h3>
<div class="$viewchangelisteners"><div class="ng-directive-page ng-directive-ngmodel-ngmodelcontroller-page"><p>Array of functions to execute whenever the
view value has changed. It is called with no arguments, and its return value is ignored.
This can be used in place of additional $watches against the model value.</p>
</div></div>
</li>
<li><h3 id="properties_$error">$error</h3>
<div class="$error"><div class="ng-directive-page ng-directive-ngmodel-ngmodelcontroller-page"><p>An object hash with all errors as keys.</p>
</div></div>
</li>
<li><h3 id="properties_$pristine">$pristine</h3>
<div class="$pristine"><div class="ng-directive-page ng-directive-ngmodel-ngmodelcontroller-page"><p>True if user has not interacted with the control yet.</p>
</div></div>
</li>
<li><h3 id="properties_$dirty">$dirty</h3>
<div class="$dirty"><div class="ng-directive-page ng-directive-ngmodel-ngmodelcontroller-page"><p>True if user has already interacted with the control.</p>
</div></div>
</li>
<li><h3 id="properties_$valid">$valid</h3>
<div class="$valid"><div class="ng-directive-page ng-directive-ngmodel-ngmodelcontroller-page"><p>True if there is no error.</p>
</div></div>
</li>
<li><h3 id="properties_$invalid">$invalid</h3>
<div class="$invalid"><div class="ng-directive-page ng-directive-ngmodel-ngmodelcontroller-page"><p>True if at least one error on the control.</p>
</div></div>
</li>
</ul>
</div>
</div>