Utilizzare la direttiva ng-href per creare link tramite binding con AngularJS

di Stefano Mostarda, in HTML5, AngularJS,

Nello script #144 abbiamo visto come utilizzare la direttiva ng-src per costruire l'attributo src di un tag img tramite il binding. In questo script vediamo come utilizzare l'attributo ng-href per coprire un'esigenza simile, cioè quella di creare il tag href di un tag a a runtime tramite binding. Prendiamo in considerazione il seguente esempio.

<a href="person/{{id}}">{{name}}</a>

Sebbene funzioni, questo approccio presenta un problema: il browser genera il tag a così come lo vediamo e successivamente, il motore di binding modifica il valore {{id}} con la proprietà id dello scope. Questo significa che tra il momento in cui il browser genera il tag a e il momento in cui il motore di binding di AngularJS costruisce correttamente l'url nella pagina c'è un link con un url errato.
Per evitare questo problema, possiamo utilizzare la direttiva ng-href. Questa direttiva genera l'attributo href solo dopo che il motore di binding genera l'url corrretto.

<a ng-href="person/{{id}}">{{name}}</a>

Commenti

Visualizza/aggiungi commenti

| Condividi su: Twitter, Facebook, LinkedIn

Per inserire un commento, devi avere un account.

Fai il login e torna a questa pagina, oppure registrati alla nostra community.

Approfondimenti

I più letti di oggi