Який правильний синтаксис ng-include?

398

Я намагаюся включити фрагмент HTML всередину ng-repeat, але не можу змусити цю функцію працювати. Здається, що синтаксис поточного ng-includeвідрізняється від того, що був раніше: я бачу багато прикладів

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

Але в офіційних документах написано використовувати

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

Але потім вниз на сторінці вона відображається як

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

Незалежно, я спробував

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

Мій фрагмент не дуже великий код, але він дуже багато відбувається; Я читав у шаблоні динамічного завантаження всерединіng-repeat , що може спричинити проблеми, тому я замінив вміст sidepanel.htmlлише словом foo, і все ще нічого.

Я також спробував оголосити шаблон прямо на сторінці так:

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

І виконуючи всі варіанти ng-includeпосилання на сценарій id, і все ще нічого.

На моїй сторінці було набагато більше, але тепер я її зняв лише до цього:

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

Заголовок відображається, але тоді мій шаблон не працює. Я не отримую жодних помилок у консолі чи від Node, і якщо я натискаю посилання в src="views/sidepanel.html"інструментах для розробників, це переводить мене до мого шаблону (і відображає foo).

— жакоб
джерело

775

Ви повинні процитувати srcрядок всередині подвійних лапок:

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

Джерело

— жакоб
джерело

4

так, це мене покусало днями. Дещо пов’язана відповідь stackoverflow.com/questions/13811948/…

— jaime

60

Причиною цього є те, що будь-яка рядок у тегах ng насправді оцінюється як кутове вираження. '' говорить йому, що це рядковий вираз.

— Гепсенс

37

@Gepsens: це має сенс, коли ти знаєш. Було б непогано, якби в документації згадувалося про її чіткість

— jacob

1

Так, тепер я знаю, чому вони кажуть "рядок" ... Дякую + jacob за знахідку

— Shadoweb

7

Я погоджуюсь, нам, безумовно, потрібні зусилля з документації щодо Angular та системи компонування.

— Гепсенс

134

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

АБО

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

АБО

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

Бали, які потрібно пам’ятати:

-> Немає пробілів у src

-> Не забудьте використовувати одну пропозицію в подвійній цитаті для src

— Калпеш Праджапаті
джерело

8

ng-include="'...'"Синтаксис виразно виглядає краще.

— П’єр-Люк Джендро

тому я припускаю, що ng-include не існує у форматі коментарів?

— OzzyTheGiant

50

Для тих, хто знімає проблеми, важливо знати, що для ng-include потрібен шлях до URL-адреси з кореневого каталогу програми, а не з того самого каталогу, де живе частковий.html. .

Наприклад:

Правильно: div ng-include src = "'/views/partials/tabSlides/add-more.html'">

Неправильно: div ng-include src = "'add-more.html'">

— Бенджамін Макферрен
джерело

6

Насправді це не зовсім правильно: шлях МОЖЕ бути відносним, але він відносно html-файлу, з якого додаток створено. У вашому "неправильному" прикладі, це працювало, якби add-more.htmlбуло в тому самому каталозі, що і app.html. У моїй відповіді, views/знаходиться в тому ж каталозі, що і app.html.

— jacob

У випадку з Laravel та розміщенням структури в загальнодоступній папці (public / app / templates / include), а викликовим файлом є (public / app / templates / index.php), що слід включати шлях (додаток / шаблони / включає /filetoinclude.php). Я не міг потрапити відносно роботи.

— Джейсон Спік

10

Для тих, хто шукає найкоротший можливий варіант "вибору предмета" з часткового, тому комбінація ng-повторів та ng-включають :

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

Насправді, якщо ви будете використовувати його так для одного ретранслятора, він буде працювати, але не для 2 з них! Кутовий (v1.2.16) з якихось причин вибухне, якщо у вас є два таких один за одним, тож безпечніше закрити діл попередньо xhtml способом:

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

— Баланс
джерело

це через роки, але саме це було мені потрібно для роботи в <tbody ng-repeat="item in vm.items" ng-include="vm.searchTemplateBodyUrl" ng-cloak>. Дякую!

— Ерік Д. Джонсон

9

Можливо, це допоможе новачкам

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

— Б.Г. Бруно
джерело

7

Це працювало для мене:

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

повний розділ:

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

— Шакал
джерело

2

Не слід поєднувати ng-viewі ng-inclueна одному елементі; src (див. templateUrl ) повинен бути налаштований у вашому маршрутизаторі.

— Якоб

@jacob так як би ти завантажив це як маршрут ?? тому що я можу змусити мій погляд завантажуватись, і я можу змусити мій контролер спрацювати, але вони не підключені, перегляньте вантажі порожні

— Sonic Soul

@SonicSoul використовувати ngRouter і встановити його як шаблон. Або якщо ви маєте на увазі використовувати параметри маршруту на шляху, просто використовуйте його як вираз JavaScript:someVar + 'some string'

— jacob

@jacob я вже використовую ngRouter, але я не знаю, як завантажити цей маршрут у ng-include .. якщо я використовую маршрут у src = він просто завантажує весь сайт, а не лише представлення :( якщо я завантажую його відносним шляхом до html, він не завантажує контролер з видом

— Sonic Soul

@SonicSoul Ви намагаєтеся завантажити шаблон, вкладений у подання, яке завантажується через ngRouter? Якщо так, я думаю, що значення, яке ви надаєте src, повинно бути абсолютним шляхом у структурі каталогів вашого проекту (не маршрутом програми). Якщо ви намагаєтеся встановити шаблон маршруту за допомогою ngInclude, це неправильно. Крім того, це було 6 років тому, і я не використовував AngularJS, мабуть, 3+ років.

— Якоб

0

спробуйте це

<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
джерело

-1

У ng-build виникає помилка файлу (404). Таким чином, ми можемо використовувати код нижче

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

наполягав,

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

— Рохіт Парте
джерело