knowhow-server/public/js/lib/angular-1.2.9/docs/partials/api/ng.directive:ngReadonly.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/booleanAttrs.js#L218" 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/booleanAttrs.js" class="improve-docs btn btn-primary"><i class="icon-edit"> </i> Improve this doc</a><h1><code ng:non-bindable="">ngReadonly</code>
<div><span class="hint">directive 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-ngreadonly-page"><p>The HTML specification does not require browsers to preserve the values of boolean attributes
such as readonly. (Their presence means true and their absence means false.)
If we put an Angular interpolation expression into such an attribute then the
binding information would be lost when the browser removes the attribute.
The <code>ngReadonly</code> directive solves this problem for the <code>readonly</code> attribute.
This complementary directive is not removed by the browser and so provides
a permanent reliable place to store the binding information.</p>
</div></div>
<h2 id="usage">Usage</h2>
<div class="usage">as attribute<pre class="prettyprint linenums">&lt;INPUT ng-readonly="{expression}"&gt;
   ...
&lt;/INPUT&gt;</pre>
<h3 id="usage_directive-info">Directive info</h3>
<div class="directive-info"><ul><li>This directive executes at priority level 100.</li>
</ul>
</div>
<h4 id="usage_directive-info_parameters">Parameters</h4><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>ngReadonly</td><td><a href="" class="label type-hint type-hint-expression">expression</a></td><td><div class="ng-directive-page ng-directive-ngreadonly-page"><p>If the <a href="guide/expression">expression</a> is truthy, 
then special attribute &quot;readonly&quot; will be set on the element</p>
</div></td></tr></tbody></table></div>
<h2 id="example">Example</h2>
<div class="example"><div class="ng-directive-page ng-directive-ngreadonly-page"><h4 id="example_source">Source</h4>
<div source-edit="" source-edit-deps="angular.js" source-edit-html="index.html-9" source-edit-css="" source-edit-js="" source-edit-json="" source-edit-unit="" source-edit-scenario="scenario.js-10" source-edit-protractor=""></div>
<div class="tabbable"><div class="tab-pane" title="index.html">
<pre class="prettyprint linenums" ng-set-text="index.html-9" ng-html-wrap=" angular.js"></pre>
<script type="text/ng-template" id="index.html-9">
  Check me to make text readonly: <input type="checkbox" ng-model="checked"><br/>
  <input type="text" ng-readonly="checked" value="I'm Angular"/>
</script>
</div>
<div class="tab-pane" title="ngScenario e2e test">
<pre class="prettyprint linenums" ng-set-text="scenario.js-10"></pre>
<script type="text/ng-template" id="scenario.js-10">
  it('should toggle readonly attr', function() {
    expect(element('.doc-example-live :text').prop('readonly')).toBeFalsy();
    input('checked').check();
    expect(element('.doc-example-live :text').prop('readonly')).toBeTruthy();
  });
</script>
</div>
</div><h4 id="example_demo">Demo</h4>
<div class="well doc-example-live animate-container" ng-embed-app="" ng-set-html="index.html-9" ng-eval-javascript=""></div>
</div></div>
</div>