2014-07-19 13 views
5

Sto lavorando su un'applicazione il cui stile e dell'interfaccia utente opzioni di intestazione cambia a seconda dello stato di un utente è attualmente in. Ad esempio, se un utente fa clic sul Carica, Modifica profilo, Crea playlist o Crea galleria pulsanti nel menu principale, questo farà sì che le seguenti modifiche al l'intestazione:Posso posizionare ui-view sul body tag?

  1. sfondo del colpo di testa di cambiare colore
  2. il logo del sito avrà l'animazione CSS3 applicati ad esso per farlo scivolare in un nuova posizione
  3. un messaggio specifico (a seconda di quale stato l'utente è in) in una bolla di parola apparirà accanto al logo
  4. un pulsante Annulla si manifesterà sul bordo destro dell'intestazione

Questo significa che ci sarà nessun elemento statico sul mio sito così la logica mi dice che dovrei mettere ui-view nel mio tag corpo rendendo così simile a questa:

<body ng-app="app" ui-view> 

non ho mai visto che usato prima da nessuna parte così ho i miei dubbi. Qualche idea?

+0

unico svantaggio è necessario includere l'intestazione in ogni modello. Può usare direttiva nell'intestazione per ascoltare le modifiche se non è all'interno di ng-view – charlietfl

+0

Perché la tua logica ti dice di mettere ui-view nel body tag? qualche particolare a riguardo? – micronyks

risposta

3

Non sono sicuro se questo sarà o non funzionerà tecnicamente, ma credo che si dovrebbe evitare, perché:

  • Richiederebbe tutti i modelli di includere un <body> tag più esterno, che li rende meno riutilizzabili
  • Generalmente è una cosa insolita da fare, e ciò comporta un costo, e non vedo alcun beneficio particolare a questo, quindi IMHO l'analisi costi/benefici dice di attenersi a ciò che è convenzionale: utilizzare <div> s.
  • Ho il sospetto che possa funzionare, ma in genere il tag con ng-app rimane attivo per l'intero ciclo di vita dell'app. È possibile che si verifichino alcuni strani errori se si sostituisce il tag contenente ng-app. Così molte persone inseriscono lo <html> tag ng-app e lo chiamano fatto.

Ma è la vostra applicazione e lo sforzo di provare entrambi gli approcci è molto bassa, quindi basta provarli e vedere (e fateci sapere cosa si impara). Non penso che sia necessario attendere la risposta StackOverflow dall'autorità per testare 2 strutture HTML leggermente diverse con la tua app.

+0

Penso che quello che stavo cercando qui era stato/viste nidificati del router uu e più viste con nome. –

2

No, per favore non farlo!

Avere ui-view all'interno del tag body può rendere molti JS plugin/librerie inutilizzabili, soprattutto nel caso in cui se ne aggiungono dinamicamente alcuni tag HTML per document.body. In questi casi, la navigazione in un'altra vista reinizializzerà document.body e quindi ignorerà i tag HTML aggiunti in precedenza.

E.g. questo è il caso di Firebase e Angular.js (AngularFire). Spero che tutti coloro che hanno riscontrato l'errore

Uncaught NotFoundError: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node. 

vedranno questo post.Assicurati di non aver aggiunto l'attributo ui-view al tag body.

Problemi correlati