Nel mio modulo ho un'icona che rappresenta se la mia entità è bloccata (mostrata da un lucchetto bloccato) o sbloccata (un lucchetto aperto). A livello di modello, questo è rappresentato da una proprietà booleana (isLocked). L'utente può commutare l'entità tra bloccato e sbloccato facendo clic sull'icona. Questo aggiorna anche il testo del suggerimento dell'icona. Questo chiama un metodo controller che commuta la proprietà entity.isLocked. È come una specie di casella di controllo.
Posso implementarlo in uno (almeno) due modi:
1) Creare una direttiva angolare personalizzata che modifichi la classe dell'elemento icona per mostrare l'icona corretta e imposta anche il testo del suggerimento. L'icona sarà quindi un singolo elemento DOM nella mia vista, decorata con la direttiva personalizzata.
2) Metti entrambi gli elementi icona bloccati e sbloccati nel DOM e mostra / nascondi ognuno usando la direttiva personalizzata ng-show.
L'opzione 1 implica la scrittura di codice personalizzato che sembra la cosa sbagliata da fare, mentre l'opzione 2 sfrutta al massimo le funzioni angolari incorporate, ma lascia l'HTML più disordinato.
In generale, dovrei preferire il metodo della direttiva personalizzata (opzione 1) o il metodo HTML (opzione 2) o qualche altro metodo? Quale sarebbe considerato più idiomatico per Angular, secondo te? E, ancora più importante, perché?
Ho pensato di metterlo su StackOverflow, ma sembra che sarebbe considerato fuori tema lì perché è una questione di opinione alla fine ...