2013-06-02 12 views
57

Attualmente sto dichiarando templateUrl relativo alla posizione corrente della finestra.Direttive dichiarative templateUrl relative a root

cvApp.directive('personalDetails', function() { 

    return { 
     restrict: 'A', 
     templateUrl: '../../Scripts/app/templates/personalDetails.html' 
    }; 

}); 

Come posso rendere templateUrl relativo alla directory principale dell'applicazione? Sto cercando qualcosa del genere:

templateUrl: '~/Scripts/app/templates/personalDetails.html' 

Can AngularJS può realizzare questo?

+0

si sta tentando questo su un server web o locale f sistema ile? Su un server web dovresti semplicemente usare "/ percorso/per/modello". Non c'è "~" (home utente) nella risoluzione del percorso web. –

+2

L'undendand OP non ha chiarito esplicitamente il contesto, ma da quello che posso vedere è all'interno di un'applicazione Web ASP.NET. Quindi il '~' si riferisce all'idea di * directory root dell'applicazione web * – superjos

risposta

77

sembra che sia supportato. Tratto da un thread on AngularJS Google Group:

l'url con "/" prefisso è relativo al dominio, senza la "/" prefisso sarà relativo alla principale ("index.html") pagina o base url (se si utilizza la posizione nella modalità html5).

Questo funziona bene:

templateUrl: '/Scripts/app/templates/personalDetails.html' 
+5

Questo ha funzionato per me in ASP.NET MVC con il tag BASE una volta rimossa la barra iniziale dal valore templateUrl. – ClearCloud8

+0

Questo suggerimento funziona per me. È fantastico. –

14

Sembra che tu stia provando a fare percorsi relativi alle app in stile ASP.NET ma lato client. La correzione è in realtà in HTML: aggiungere un tag base nella testa, come questo:

<base href="<%= Request.ApplicationPath %>" /> 

Poi mantenere i percorsi dei modelli relativi a questo, come in

templateUrl: 'Scripts/app/templates/personalDetails.html' 
+0

Il problema con questo approccio è che ogni altro URL relativo nel documento ora ha questo prefisso. –

3

Usa '././Scripts/app/templates/personalDetails.html'

ha funzionato per me.

0

angular 4 utilizza il pacchetto Web come pacchetto.

./ means relative path to current folder 



../ means parent folder 

domain = src

root = src/index

per esempio sotto app.component.ts di file, url significa xxx.css xxx.html si trovano nella stessa cartella xxx. ts

./ is relative path as current folder 

../ is relative path as parent folder 

@Component({ 
selector: 'app-root', 
templateUrl: './app.component.html', 
styleUrls: ['./app.component.css'] 
}) 

COMPONENT-RELATIVE PATHS IN ANGULAR

Problemi correlati