AngularJS: best practice che visualizza il testo statico basato su uno stato / variabile - angularjs

Ho piccole porzioni di testo come

<div>
<h4>Why Register?</h4>
<p>As candidate...</p>
</div>

opposto a

<div>
<h4>Why Register?</h4>
<p>As company...</p>
</div>

In base a una variabile del mio controller inserisco il parziale corretto con:

<div ng-switch on="role">
<div ng-switch-when="candidate">
<div ng-include=""candidate.html""></div>
</div>
<div ng-switch-when="company">
<div ng-include=""company.html""></div>
</div>
<div ng-switch-default>
<div ng-include=""candidate.html""></div>
</div>
</div>

Questo fa il suo lavoro ma sembra orribile. C'è un modo in cui potrei farlo meglio?

risposte:

Puoi usare:

<div ng-include="(role || "candidate") + ".html""></div>

Puoi sempre tenere i tuoi variabili di stringa in javascript o file json esterno e utilizzare il markup che è legato a un modello come questo:

<div ng-controller="something">
<h4>Why Register?</h4>
<p>{{who}}</p>
</div>

e poi all'interno del tuo controller "qualcosa" fornisci il codice:

if(role == "company")
$scope.who = "As company...";
else
$Scope.who = "As candidate...";

Se hai molti posti nel codice che usano questa funzione, potresti considerare di tenere le variabili in json esterno e poi leggerle in javascript / controller.

Se le parti non sono così grandi, puoi metterle tutte lì e usare ng-show per filtrare ciò che viene effettivamente mostrato. Questo richiede il minor markup.

<h4>Why register?</h4>
<p ng-show="isCompany">Company targeted content...</p>
<p ng-show="isCandidate">Candidate targeted content...</p>