<div class="header-panel member">
<h2><span class="identifier">WjLinearGauge</span> Class</h2>
<dl class="dl-horizontal">
<dt>File</dt><dd class="filename">wijmo.angular.js</dd>
<dt>Module</dt><dd><a href="topic/wijmo.angular.Module.html"><span class="identifier">wijmo.angular</span></a></dd>
<dt>Derived Classes</dt><dd><a href="topic/wijmo.angular.WjBulletGraph.Class.html"><span class="identifier">WjBulletGraph</span></a></dd>
<dt>Show</dt>
<dd>
<label><input type="checkbox" ng-model="ctx.showInherited"> Inherited Members</label>&nbsp;&nbsp;&nbsp;
<label><input type="checkbox" ng-model="ctx.showRaisers"> Event Raisers</label>
</dd>
</dl>
<div class="comment"><p>AngularJS directive for the <a href="topic/wijmo.gauge.LinearGauge.Class.html"><span class="identifier">LinearGauge</span></a> control.</p>
<p>Use the <b>wj-linear-gauge</b> directive to add linear gauges to your AngularJS applications. 
Note that directive and parameter names must be formatted in lower-case with dashes 
instead of camel-case. For example:</p>


<pre>&lt;wj-linear-gauge 
  value="ctx.gauge.value" 
  show-text="Value"
  is-read-only="false"&gt;
  &lt;wj-range 
    wj-property="pointer" 
    thickness="0.2"&gt;
    &lt;wj-range 
      min="0" 
      max="33" 
      color="green"&gt;
    &lt;/wj-range&gt;
    &lt;wj-range 
      min="33" 
      max="66" 
      color="yellow"&gt;
    &lt;/wj-range&gt;
    &lt;wj-range 
      min="66" 
      max="100" 
      color="red"&gt;
    &lt;/wj-range&gt;
  &lt;/wj-range&gt;
&lt;/wj-linear-gauge&gt;</pre>
<p>The <b>wj-linear-gauge</b> directive supports the following attributes:</p>
<p><dl class="dl-horizontal">
  <dt>ng-model</dt>      <dd><code>@</code> Binds the control's <b>value</b> property using the ng-model Angular 
                         directive. Binding the property using the ng-model directive provides standard benefits 
                         like validation, adding the control's state to the form instance, and so on. To redefine 
                         properties on a control that is bound by the ng-model directive, use the wj-model-property 
                         attribute.</dd>
  <dt>wj-model-property</dt>  <dd><code>@</code> Specifies a control property that is bound to a scope using the 
                              <b>ng-model</b> directive.</dd>
  <dt>control</dt>       <dd><code>=</code> A reference to the <a href="topic/wijmo.gauge.LinearGauge.Class.html"><span class="identifier">LinearGauge</span></a> 
                         control created by this directive.</dd>
  <dt>direction</dt>     <dd><code>@</code> The <a href="topic/wijmo.gauge.GaugeDirection.Enum.html"><span class="identifier">GaugeDirection</span></a> value in 
                         which the gauge fills as the value grows.</dd>
  <dt>format</dt>        <dd><code>@</code> The format string used for displaying 
                         the gauge values as text.</dd>
  <dt>has-shadow</dt>    <dd><code>@</code> A value indicating whether the gauge 
                         displays a shadow effect.</dd>
  <dt>initialized</dt>   <dd><code>&</code> This event occurs after the binding has finished
                         initializing the control with attribute values.</dd>
  <dt>is-initialized</dt> <dd><code>=</code> A value indicating whether the binding has finished
                          initializing the control with attribute values. </dd>
  <dt>is-animated</dt>   <dd><code>@</code> A value indicating whether the gauge 
                         animates value changes.</dd>
  <dt>is-read-only</dt>  <dd><code>@</code> A value indicating whether users are 
                         prevented from editing the value.</dd>
  <dt>min</dt>           <dd><code>@</code> The minimum value that the gauge  
                         can display.</dd>
  <dt>max</dt>           <dd><code>@</code> The maximum value that the gauge  
                         can display.</dd>
  <dt>show-text</dt>     <dd><code>@</code> The <a href="topic/wijmo.gauge.ShowText.Enum.html"><span class="identifier">ShowText</span></a> value indicating 
                         which values display as text within the gauge.</dd>
  <dt>step</dt>          <dd><code>@</code> The amount to add or subtract to the value 
                         property when the user presses the arrow keys.</dd>
  <dt>thickness</dt>     <dd><code>@</code> The thickness of the gauge, on a scale 
                         of zero to one.</dd>
  <dt>value</dt>         <dd><code>=</code> The value displayed on the gauge.</dd>
  <dt>got-focus</dt>     <dd><code>&</code> The <a href="topic/wijmo.gauge.LinearGauge.Class.html/#gotFocus"><span class="identifier">gotFocus</span></a> event handler.</dd>
  <dt>lost-focus</dt>    <dd><code>&</code> The <a href="topic/wijmo.gauge.LinearGauge.Class.html/#lostFocus"><span class="identifier">lostFocus</span></a> event handler.</dd>
</dl></p>
<p>The <b>wj-linear-gauge</b> directive may contain one or more <a href="topic/wijmo.angular.WjRange.Class.html"><span class="identifier">WjRange</span></a> directives.</p>
<p><div class="member-panel example"><h3 class="node collapsed">Example</h3><div class="fiddle"><script async src="http://jsfiddle.net/Wijmo5/t842jozb/embed/result,html,js,css"></script></div></div></p></div>
</div>
<div class="member-panel class members" ng-class="{ 'show-inherited' : ctx.showInherited, 'show-raisers' : ctx.showRaisers }">
</div>
