Direttive personalizzate o ng-mostra / nascondi

1

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 ...

    
posta Mike Goodwin 06.12.2013 - 21:02
fonte

2 risposte

2

In realtà puoi usare i builtin angolari E avere solo un singolo elemento DOM!

<img ng-src="{{isLocked ? 'closed-padlock.png' : 'open-padlock.png'}}" 
    alt="{{isLocked ? 'locked-text' : 'open-text'}}">

Questo cambierà condizionalmente le proprietà src e alt dell'immagine in base al fatto che sia impostato o meno Blocco. A dire il vero, l'espressione ternaria è un po 'confusa, ma è tutta logica di presentazione, quindi penso che appartenga al DOM in questo modo.

    
risposta data 06.12.2013 - 23:11
fonte
1

Mi piace l'opzione 1 meglio. Mi sento come quando stai mostrando e nascondendo le cose cambiando le classi così attraverso il CSS è più facile e veloce da gestire.

Questo riduce anche la quantità di elementi sul DOM

    
risposta data 06.12.2013 - 21:55
fonte

Leggi altre domande sui tag