Angularjs: Getrennte Elemente für "editierbaren" Modus und "readonly" Modus?

Question

Ich habe eine Angular App mit vielen Formelementen. Im Bearbeitungsmodus kann der Benutzer die Eingabeelemente bearbeiten, Optionen ändern, Kontrollkästchen markieren usw. Im Lese-Modus sollte der Benutzer nur diese Werte lesen können. Nur Administratoren können etwas auf der Seite bearbeiten, andere Personen können nur den Inhalt lesen.

Was ich möchte, ist nur das Skript verwenden span oder div Elemente im schreibgeschützten Modus, um die Anzahl der Beobachter insgesamt zu reduzieren. Im Endeffekt muss ich immer zwei separate HTML-Blöcke definieren, wie unten gezeigt.

exampleInput.tpl.html

Hinweis: Ich benutze ng-if hier, weil ich das Eingangselement aus dem DOM im schreibgeschützten Modus entfernen, um will die Zahl der Beobachter zu reduzieren.

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

Anwendung:

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

---

Meine Frage:

Gibt es einen besseren Weg, es zu tun? Ich weiß, ich kann nur ein einziges Eingabeelement haben und CSS verwenden, um das Styling im 'deaktivierten' Modus zu steuern, aber das entfernt nicht die Beobachter, was mein Hauptgrund dafür ist, die Dinge so zu machen. Ich bin relativ neu in Angular, so dass jeder Rat geschätzt wird.

Ich benutze Angular 1.5.x.

Answer 1

Anstatt dies pro Element zu tun, könnten Sie eine Vorlage zum Bearbeiten und eine zum Lesen erstellen und sie dann austauschen, indem Sie die an ng-include übergebene Variable ändern, abhängig davon, ob Sie sich im Bearbeitungsmodus befinden oder nicht.