Qual è la sintassi corretta di ng-include?

398

Sto cercando di includere uno snippet HTML all'interno di un ng-repeat, ma non riesco a far funzionare l'inclusione. Sembra che l'attuale sintassi di ng-includesia diversa da come era in precedenza: vedo molti esempi usando

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

Ma nei documenti ufficiali , dice di usare

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

Ma poi nella pagina 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>

Il mio frammento non è molto codice, ma sta succedendo molto; Ho letto all'interno del modello di caricamento dinamicong-repeat che ciò potrebbe causare un problema, quindi ho sostituito il contenuto sidepanel.htmlcon solo la parola fooe ancora niente.

Ho anche provato a dichiarare il modello direttamente nella pagina in questo modo:

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

E passando attraverso tutte le varianti del ng-includeriferimento allo script id, e ancora niente.

La mia pagina conteneva molto di più, ma ora l'ho ridotta in questo modo:

<!-- 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>

Il rendering dell'intestazione, ma il mio modello no. Non ottengo errori nella console o dal nodo e, se faccio clic sul collegamento negli src="views/sidepanel.html"strumenti di sviluppo, mi porta al mio modello (e visualizza foo).

— Giacobbe
fonte

775

Devi virgolette singole la srcstringa all'interno delle virgolette doppie:

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

fonte

— Giacobbe
fonte

4

si, mi sono morso l'altro giorno. Risposta alquanto correlata stackoverflow.com/questions/13811948/…

— jaime

60

La ragione di ciò è che qualsiasi stringa nei tag ng viene infatti valutata come espressione angolare. '' dice che è un'espressione stringa.

— Gepsens,

37

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

— Jacob

1

Sì, ora so perché dicono "stringa" ... Grazie + jacob per la scoperta

— Shadoweb

7

Sono d'accordo, abbiamo sicuramente bisogno di uno sforzo di documentazione su Angular e di un sistema di layout.

— Gepsens,

134

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

O

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

O

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

Punti da ricordare:

-> Nessuno spazio in src

-> Ricorda di usare la virgoletta singola tra virgolette doppie per src

— Kalpesh Prajapati
fonte

8

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

— Pier-Luc Gendreau,

quindi presumo che ng-include non esista in formato commento?

— OzzyTheGiant,

50

Per la risoluzione di questi problemi, è importante sapere che ng-include richiede che il percorso dell'URL provenga dalla directory radice dell'app e non dalla stessa directory in cui risiede il file partial.html. (mentre partial.html è il file di visualizzazione in cui è possibile trovare il tag di markup ng-include inline).

Per esempio:

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

Errato: div ng-include src = "'add-more.html'">

— Benjamin McFerren
fonte

6

In realtà, questo non è esattamente corretto: il percorso PU be essere relativo, ma è relativo al file html da cui è stata creata un'istanza dell'app. Nel tuo esempio "errato", funzionerebbe se add-more.htmlfosse nella stessa directory di app.html. Nella mia risposta, views/è nella stessa directory di app.html.

— Jacob

Nel caso di Laravel e posizionando la struttura nella cartella pubblica (pubblica / app / modelli / include) e il file chiamante è (pubblico / app / modelli / index.php) il percorso di inclusione deve essere (app / modelli / include /filetoinclude.php). Non sono riuscito a ottenere rispetto al lavoro.

— Jason Spick,

10

Per coloro che sono alla ricerca della soluzione "renderer elemento" più breve possibile da un parziale, quindi una combinazione di ng-repeat e ng-include :

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

In realtà, se lo usi in questo modo per un ripetitore, funzionerà, ma non per 2 di loro! Angular (v1.2.16) impazzirà per qualche motivo se ne hai 2 uno dopo l'altro, quindi è più sicuro chiudere il div nel modo pre-xhtml:

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

— Equilibrio
fonte

questo è successo dopo anni, ma era esattamente quello di cui avevo bisogno per lavorare in a <tbody ng-repeat="item in vm.items" ng-include="vm.searchTemplateBodyUrl" ng-cloak>. Grazie!

— Eric D. Johnson,

9

Forse questo aiuterà 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>

— BG Bruno
fonte

7

Questo ha funzionato per me:

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

div completo:

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

— Sciacallo
fonte

2

Non dovresti combinare ng-viewe ng-incluesullo stesso elemento; src (vedi templateUrl ) deve essere configurato nel router.

— Jacob

@jacob quindi come lo caricheresti come rotta ?? perché riesco a caricare la vista e posso attivare il controller, ma non sono connessi, la visualizzazione è vuota

— Sonic Soul

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

— jacob

@jacob uso già ngRouter ma non so come caricare quel percorso in ng-include .. se uso un percorso in src = carica solo l'intero sito non solo la vista :( se lo carico dal percorso relativo a html, non carica il controller con la vista

— Sonic Soul

@SonicSoul stai cercando di caricare un modello nidificato in una vista che si sta caricando tramite ngRouter? In tal caso, penso che il valore fornito a src dovrebbe essere un percorso assoluto nella struttura delle directory del tuo progetto (non una route dell'app). Se stai cercando di impostare il modello di percorso utilizzando ngInclude, è sbagliato. Oltre a ciò, questo è stato 6 anni fa, e non ho usato AngularJS in probabilmente 3+ anni.

— Jacob,

0

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>

— jayaweb
fonte

-1

Su ng-build, si verifica un errore di file non trovato (404). Quindi possiamo usare il codice qui sotto

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

invece di,

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

— Rohit Parte
fonte