Jaka jest poprawna składnia ng-include?

398

Próbuję dołączyć fragment kodu HTML do pliku ng-repeat, ale nie mogę go włączyć. Wygląda na to, że obecna składnia ng-includejest inna niż poprzednio: widzę wiele przykładów

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

Ale w oficjalnych dokumentach mówi się używać

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

Ale potem na stronie jest pokazany jako

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

Niezależnie od tego próbowałem

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

Mój fragment nie jest zbyt dużym kodem, ale wiele się dzieje; Przeczytałem w temacie Dynamicznie ładuj szablonng-repeat , który może powodować problemy, więc zastąpiłem treść sidepanel.htmltylko słowem fooi nadal nic.

Próbowałem również zadeklarować szablon bezpośrednio na stronie w następujący sposób:

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

I przeglądanie wszystkich wariantów ng-includeodwoływania się do skryptu idi wciąż nic.

Moja strona zawierała o wiele więcej, ale teraz ograniczyłem ją do tego:

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

Nagłówek jest renderowany, ale mój szablon nie. Nie otrzymuję żadnych błędów w konsoli ani z Węzła, a jeśli kliknę link w src="views/sidepanel.html"narzędziach programistycznych, przejdzie do mojego szablonu (i wyświetli się foo).

javascript html include angularjs repeater Jakub
źródło

Odpowiedzi:

775

Musisz zacytować swój srcciąg w cudzysłowie:

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

Źródło

Jakub
źródło
4
tak, ugryzł mnie pewnego dnia. Nieco powiązana odpowiedź stackoverflow.com/questions/13811948/…
jaime
60
Powodem tego jest fakt, że każdy ciąg znaków w ng jest w rzeczywistości oceniany jako wyrażenie kątowe. '' mówi, że jest to wyrażenie łańcuchowe.
Gepsens,
37
@Gepsens: to ma sens, gdy się dowiesz. Byłoby miło, gdyby w dokumentacji wspomniano o jawności.
jacob
1
Tak, teraz wiem, dlaczego mówią „string” ... Dzięki + Jacob za znalezisko
Shadoweb
7
Zgadzam się, zdecydowanie potrzebujemy dokumentacji związanej z Angularem i układem graficznym.
Gepsens,
134 
    <ng-include src="'views/sidepanel.html'"></ng-include>

LUB

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

LUB

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

Punkty do zapamiętania:

-> Brak spacji w src

-> Pamiętaj, aby używać src w pojedynczym cudzysłowie

Kalpesh Prajapati
źródło
8
ng-include="'...'"Składnia wygląda zdecydowanie lepiej.
Pier-Luc Gendreau
więc zakładam, że ng-include nie istnieje w formacie komentarza?
OzzyTheGiant
50

W przypadku rozwiązywania problemów ważne jest, aby wiedzieć, że ng-include wymaga, aby ścieżka url pochodziła z katalogu głównego aplikacji, a nie z tego samego katalogu, w którym znajduje się częściowy plik.html. (natomiast częściowo.html to plik widoku, w którym można znaleźć wbudowany znacznik ng-include).

Na przykład:

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

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

Benjamin McFerren
źródło
6
W rzeczywistości nie jest to do końca poprawne: ścieżka MOŻE być względna, ale jest względna do pliku HTML, z którego utworzono instancję aplikacji. W twoim „niepoprawnym” przykładzie zadziałałoby, gdyby add-more.htmlbył w tym samym katalogu co app.html. W mojej odpowiedzi views/znajduje się w tym samym katalogu co app.html.
jacob
W przypadku Laravela i umieszczenia struktury w folderze publicznym (public / app / templates / obejmuje), a plikiem wywołującym jest (public / app / templates / index.php) ścieżka włączenia musi być (app / templates / obejmuje /filetoinclude.php). Nie mogłem dostać się do pracy.
Jason Spick
10

Dla tych, którzy szukają najkrótszego możliwego rozwiązania „mechanizmu renderującego elementy” z częściowego, więc kombinacja ng-repeat i ng-include :

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

Właściwie, jeśli użyjesz go w ten sposób dla jednego repeatera, zadziała, ale nie dla 2 z nich! Angular (v1.2.16) z jakiegoś powodu przerazi się, jeśli masz 2 z nich jeden po drugim, więc bezpieczniej jest zamknąć div przed wersją xhtml:

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

Saldo
źródło
to jest lata później, ale właśnie tego potrzebowałem do pracy w <tbody ng-repeat="item in vm.items" ng-include="vm.searchTemplateBodyUrl" ng-cloak>. Dzięki!
Eric D. Johnson
9

Może to pomoże początkującym

<!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
źródło
7

To działało dla mnie:

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

kompletny div:

<div id="drivivgskills" ng-controller="DrivingSkillsCtrl" ng-view ng-include src="'views/templates/drivingskills.html'" ></div>
Szakal
źródło
2
Nie należy łączyć ng-viewi ng-incluetego samego elementu; src (patrz templateUrl ) powinien być skonfigurowany w routerze.
jacob
@jacob, więc jak byś załadował to jako trasę? ponieważ mogę załadować mój widok i uruchomić mój kontroler, ale nie są one połączone, wyświetl ładunki puste
Sonic Soul
@SonicSoul użyj ngRoutera i ustaw go jako szablon. Lub jeśli masz na myśli użycie parametrów trasy na ścieżce, po prostu użyj go jak wyrażenia JavaScript:someVar + 'some string'
jacob
@jacob już używam ngRoutera, ale nie wiem jak załadować tę trasę w ng-include .. jeśli użyję trasy w src = ładuje tylko całą witrynę, a nie tylko widok :( jeśli ładuję ją według ścieżki względnej do html, nie ładuje kontrolera z widokiem
Dusza Sonic
@SonicSoul próbujesz załadować szablon zagnieżdżony w widoku ładowanym przez ngRouter? Jeśli tak, uważam, że wartość, którą podajesz src, powinna być ścieżką bezwzględną w strukturze katalogów twojego projektu (a nie ścieżką aplikacji). Jeśli próbujesz ustawić szablon trasy za pomocą ngInclude, to źle. Poza tym było to 6 lat temu i nie używałem AngularJS od ponad 3 lat.
jacob
0

Spróbuj tego 

<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
źródło
-1

Podczas kompilacji ng występuje błąd nie znaleziono pliku (404). Możemy więc użyć poniższego kodu

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

za sprawą 

<div ng-include="'views/transaction/test.html'"></div>
Rohit Parte
źródło