modello di carico angolare da url e compilare all'interno div

Dato che sono nuovo di Angular JS, mi chiedevo come caricare un modello esterno e compilarlo con alcuni dati nel mirato div.modello di carico angolare da url e compilare all'interno div

Per esempio ho questo modello:

<script type="text/ng-template"> 

    <img src="{{Thumb}}" /> 

<script>

Il div che dovrebbe contenere il modello:

<div data-ng-controller=" ... "></div>

Il modello si trova da qualche parte in una cartella /templates/test.php. Esiste una build in modo da eseguire il caricamento del template come farebbe una direttiva e compilarla rispetto ad alcuni dati che sostituirebbero la chiave {{Thumb}} (e molti altri ovviamente)?

MODIFICA: Cosa succede se utilizzo $routes e carica un modello quando sono nella directory principale del sito Web? Come si potrebbe ottenere?

fonte

2013-02-09 Roland

in angolare ci sono 2 modi di utilizzo di template (almeno 2 modi che conosco):

il primo utilizzando un modello in linea (nello stesso file) con la seguente sintassi:
```
<script type="text/ng-template"> 
    <img ng-src="{{thumb}}"> 
</script> 
```
il secondo (quello che si vuole) è modello esterno:
```
<img ng-src="{{thumb}}"> 
```

così quello che dovete fare è quello di rimuovere la parte di script dal modello e quindi utilizzare il ng-includere nel div voluto in questo modo:

<div ng-include="'templates/test.php'"></div>

necessità di avere doppi apici e virgolette singole per lavoro. Spero che questo aiuti.

fonte

2013-02-09 13:17:09

Sembra funzionare.Il '{{Thumb}}' sarà sostituito solo con un valore se definisco un controller e imposto '$ scope.Thumb' su un valore. Inoltre, ottengo un '404' per la sorgente di immagini' {{Thumb}} ', può essere evitato? – Roland

metti un esempio su [plnkr] (http://plnkr.co/edit/gist:3510140), così posso capirti meglio. –

Bene, dai un'occhiata all'esempio che hanno: http://docs.angularjs.org/api/ng.directive:ngView; Sto preparando la stessa cosa adesso, ma vengo reindirizzato, probabilmente perché il percorso non corrisponde alla posizione che ho? Ho come '$ routeProvider.when ('', { \t \t \t TemplateURL: 'templates/vcard.php', \t \t \t regolatore: "VCardController" \t \t});' – Roland

Diciamo che ho questo index.html:

<!doctype html> <html lang="en" ng-app="myApp"> 
     <body> 
      <script src="tpl/ng.menu.tpl" type="text/ng-template"></script> 
      <mainmenu></mainmenu>  
      <script src="lib/angular/angular.js"></script> 
      <script src="js/directives.js"></script> 
     </body> 
</html>

e ho un file di modello "tpl/ng.menu.tpl" con solo queste 4 linee:

<ul class="menu"> 
    <li><a href="#/view1">view1</a></li> 
    <li><a href="#/view2">view2</a></li> 
</ul>

mie direttive di mappatura "JS/directives.js":

angular.module('myApp',['myApp.directives']); 
var myModule = angular.module('myApp.directives', []); 

myModule.directive('mainmenu', function() { 
    return { 
     restrict:'E', 
     replace:true, 
     templateUrl:'tpl/ng.menu.tpl' 
    } 
});

fonte

2013-03-18 03:03:43 ggv

Qualche idea sul perché Angular veda solo il contenuto all'interno dei tag '

modello di carico angolare da url e compilare all'interno div

risposta

Problemi correlati