title: Angularjs: Separate elements for 'editable' mode and 'readonly' mode?
body: <p>I have an Angular app with a lot of form elements. In 'edit' mode, the user is able to edit the input items, change options, mark checkboxes, etc. In 'read' mode, the should only be able to read this values. Only admins will be able to edit anything on the page, other people will only be able to read the content.</p>
  
  <p>What I would like to do is to just have the script use plain <code>span</code> or <code>div</code> elements in read only mode in order to reduce the number of watchers overall. Implementation wise, I always end up having to define two separate html 'blocks' like shown below. </p>
  
  <p><strong>exampleInput.tpl.html</strong></p>
  
  <p>Note: I use <code>ng-if</code> here because I want to remove the input element from the DOM in read-only mode in order to reduce the number of watchers.</p>
  
  <pre><code>    &lt;!-- editable mode. --&gt;
      &lt;input 
        ng-if="!$ctrl.isReadOnly()"
        ng-model="$ctrl.value" 
        value="$ctrl.value"
      /&gt;
      &lt;!-- read only --&gt;
      &lt;span 
        ng-if="$ctrl.isReadOnly()"
        ng-bind="$ctrl.value"&gt;
      &lt;/span&gt;
  </code></pre>
  
  <p><strong>exampleInput.comp.js</strong></p>
  
  <pre><code>    // The example-input component
      (function(){
        "use strict";
        angular
          .module("exampleInput", ["ngSanitize", "userSettings"])
          .component("exampleInput", {
            templateUrl: "exampleInput.tpl.html",
            bindings: {
              value: "="
            },
            transclude: true,
            controller: ["$scope", "userSettings", function($scope, userSettings){
                var ctrl = this;
                ctrl.isReadOnly = userSettings.isReadOnly;
              }
            ]
          });
      }());
  </code></pre>
  
  <p><strong>Application</strong>:</p>
  
  <pre><code>    &lt;qa-input value="value.foobar"&gt;
      &lt;/qa-input&gt;
  </code></pre>
  
  <hr>
  
  <p><strong>My Question</strong>: </p>
  
  <p>Is there a better way to do it? I know I can just have a single input element and use css to control the styling in 'disabled' mode but that doesn't remove the watchers which is my main reason for doing things this way. I'm fairly new to Angular so any advice is appreciated. </p>
  
  <p>I am using Angular 1.5.x.</p>