Qual è la sintassi corretta di ng-include?

387

Sto tentando di includere uno snippet HTML all'interno di uno ng-repeat, ma non riesco a far funzionare l'inclusione. Sembra che la sintassi corrente di ng-include è diverso da quello che era in precedenza: Vedo molti esempi che utilizzanoQual è la sintassi corretta di ng-include?

<div ng-include src="path/file.html"></div>

Ma nel official docs, si dice di usare

<div ng-include="path/file.html"></div>

Ma poi down the page, viene mostrato come

<div ng-include src="path/file.html"></div>

Indipendentemente da ciò, ho provato

<div ng-include="views/sidepanel.html"></div>

<div ng-include src="views/sidepanel.html"></div>

<ng-include src="views/sidepanel.html"></ng-include>

<ng-include="views/sidepanel.html"></ng-include>

<ng:include src="views/sidepanel.html"></ng:include>

mio frammento non è molto codice, ma ha un sacco di cose; Ho letto in Dynamically load template inside ng-repeat che ciò potrebbe causare un problema, quindi ho sostituito il contenuto di sidepanel.html con solo la parola foo e ancora nulla.

Ho provato anche dichiarare il modello direttamente nella pagina come questa:

<script type="text/ng-template" id="tmpl"> 
    foo 
</script>

e che attraversa tutte le variazioni del ng-include riferimento alla sceneggiatura di id, e ancora niente.

La mia pagina ha avuto molto di più in esso, ma ora ho messo a nudo giù a proprio questo:

<!-- index.html --> 
<html> 
<head> 
<!-- angular includes --> 
</head> 
<body ng-view="views/main.html"> <!-- view is actually set in the router --> 
    <!-- views/main.html --> 
    <header> 
     <h2>Blah</h2> 
    </header> 
    <article id="sidepanel"> 
     <section class="panel"> <!-- will have ng-repeat="panel in panels" --> 
      <div ng-include src="views/sidepanel.html"></div> 
     </section> 
    </article> 
<!-- index.html --> 
</body> 
</html>

L'intestazione rende, ma poi il mio modello non lo fa. Non ricevo errori nella console o dal nodo e se faccio clic sul collegamento in src="views/sidepanel.html" in strumenti dev, mi porta al mio modello (e visualizza foo).

fonte

2012-12-18 jacob

752

dovete apice singolo stringa src all'interno delle virgolette:

<div ng-include src="'views/sidepanel.html'"></div>

Source

fonte

2012-12-19 00:11:08 jacob

sì, questo mi ha morso l'altro giorno. Risposta un po 'correlata http://stackoverflow.com/questions/13811948/different-ng-includes-on-the-same-page-how-to-send-different-variables-to-each/13812605#13812605 – jaime

+59

Il motivo per questo è che qualsiasi stringa nei tag ng viene valutata come un'espressione angolare. '' dice che è un'espressione di stringa. – Gepsens

+33

@Gepsens: ha senso una volta che lo sai. Sarebbe bello se la documentazione lo menzionasse comunque. – jacob

Per chi ricerca guasti, è importante sapere che ng-includono richiede il sentiero URL di essere dalla directory root dell'app e non dalla stessa directory in cui vive partial.html. (Mentre partial.html è il file di visualizzazione che è possibile trovare il tag di markup inline ng-include).

Ad esempio:

corretta: div ng-includono src = " '/views/partials/tabSlides/add-more.html'">

errato: div ng-includono src = "'aggiungi di più.html' ">

fonte

2013-11-16 19:39:29

In realtà, questo non è esattamente corretto: il percorso può essere relativo, ma è relativo al file html da cui è stata creata l'istanza dell'app. Nel tuo esempio "errato", funzionerebbe se "aggiungi di più".html' era nella stessa directory di 'app.html'. Nella mia risposta, 'views /' si trova nella stessa directory di 'app.html'. – jacob

Nel caso di Laravel e posizionando la struttura nella cartella pubblica (pubblico/app/templates/include) e il file chiamante è (pubblico/app/templates/index.php) il percorso di inclusione deve essere (app/templates/includes/filetoinclude.php). Non potevo essere imparentato al lavoro. –

Per coloro che sono alla ricerca per il più breve possibile "soluzione voce renderer" da una parziale, in modo da un combo di ng-repeat e ng-include:

<div ng-repeat="item in items" ng-include src="'views/partials/item.html'" />

In realtà, se lo si utilizza in questo modo per un ripetitore, funzionerà, ma non lo farà per 2 di loro! Angolare (v1.2.16) sarà fuori di testa per qualche motivo se ne hai 2 uno dopo l'altro, quindi è più sicuro chiudere la modalità pre-xhtml:

<div ng-repeat="item in items" ng-include src="'views/partials/item.html'"></div>

fonte

2014-05-29 06:55:08 Balance

127

<ng-include src="'views/sidepanel.html'"></ng-include>

<div ng-include="'views/sidepanel.html'"></div>

<div ng-include src="'views/sidepanel.html'"></div>

punti da ricordare:

-> Niente spazi in src

-> Ricordate di usare sola citazione in camera doppia offerta per src

fonte

2014-06-23 13:59:47

La sintassi 'ng-include =" '...' "' sembra decisamente migliore. –

quindi suppongo che ng-include non esista nel formato dei commenti? – OzzyTheGiant

Forse questo aiuterà per i principianti

<!doctype html> 
<html lang="en" ng-app> 
    <head> 
    <meta charset="utf-8"> 
    <title></title> 
    <link rel="icon" href="favicon.ico"> 
    <link rel="stylesheet" href="custom.css"> 
    </head> 
    <body> 
    <div ng-include src="'view/01.html'"></div> 
    <div ng-include src="'view/02.html'"></div> 
    <script src="angular.min.js"></script> 
    </body> 
</html>

fonte

2014-09-09 21:43:33

questo ha funzionato per me:

ng-include src="'views/templates/drivingskills.html'"

completa div:

<div id="drivivgskills" ng-controller="DrivingSkillsCtrl" ng-view ng-include src="'views/templates/drivingskills.html'" ></div>

fonte

2014-09-12 21:12:28 Jackal

Non si deve combinare 'ng-view' e' ng-inclue' sullo stesso elemento; il src (vedi [templateUrl] (https://docs.angularjs.org/api/ngRoute/provider/$routeProvider#when)) dovrebbe essere configurato nel tuo router. – jacob

@jacob quindi come vorresti caricare questo come percorso ?? perché posso caricare la vista e posso attivare il mio controller, ma non sono connessi, visualizzare i carichi vuoti –

@SonicSoul usa ngRouter e impostarlo come modello. O se intendi usare i parametri di percorso nel percorso, basta usarlo come un'espressione JavaScript: 'someVar + 'some string'' – jacob

prova questo

<div ng-app="myApp" ng-controller="customersCtrl"> 
    <div ng-include="'myTable.htm'"></div> 
</div> 

<script> 
var app = angular.module('myApp', []); 
app.controller('customersCtrl', function($scope, $http) { 
    $http.get("customers.php").then(function (response) { 
     $scope.names = response.data.records; 
    }); 
}); 
</script>

fonte

2016-02-15 11:20:15 jayaweb

Qual è la sintassi corretta di ng-include?

risposta

Problemi correlati