Angularjs： '編集可能'モードと '読み取り専用'モードの要素が分かれていますか？

Question

私は多くのフォーム要素を持つ角度アプリを持っています。 '編集'モードでは、ユーザーは入力項目の編集、オプションの変更、チェックボックスのチェックなどを行うことができます。 '読み取り'モードでは、この値のみを読み取ることができます。管理者だけがページ上の何かを編集でき、他の人はコンテンツを読むことができます。

私がしたいのは、ウォッチャー全体の数を減らすために、スクリプトに平文spanまたはdiv要素を読み取り専用モードで使用させることです。実装を賢明にすると、私はいつも以下のように2つの別々のhtml 'ブロック'を定義する必要があります。

exampleInput.tpl.html

注：私はウォッチャーの数を減らすために、読み取り専用モードでDOMからの入力要素を削除したいので、私はここにng-ifを使用しています。

<!-- editable mode. --> 
    <input 
     ng-if="!$ctrl.isReadOnly()" 
     ng-model="$ctrl.value" 
     value="$ctrl.value" 
    /> 
    <!-- read only --> 
    <span 
     ng-if="$ctrl.isReadOnly()" 
     ng-bind="$ctrl.value"> 
    </span> 

exampleInput.comp.js

// 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; 
      } 
      ] 
     }); 
    }()); 

アプリケーション：

<qa-input value="value.foobar"> 
    </qa-input> 

---

私の質問：

もっと良い方法がありますか？私はちょうど単一の入力要素を持つことができ、 '無効'モードでスタイリングを制御するCSSを使用することができますが、これは私の主な理由は、この方法を行うためのウォッチャーを削除しません。私はAngularにはかなり新しいので、アドバイスをいただければ幸いです。

私は角度1.5.xを使用しています。

Answer 1

要素ごとに行う代わりに、編集モードであるかどうかに基づいて、ng-includeに渡される変数を変更して、編集用のテンプレートと読み取り用のテンプレートを作成してスワップすることができます。