Каков правильный синтаксис 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).

javascript html include angularjs repeater Джекоб
источник

775

Вы должны заключить одну srcстроку в двойные кавычки:

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

Источник

Джекоб
источник

4

да, этот кусочек меня на днях. Несколько связанный ответ stackoverflow.com/questions/13811948/…

jaime

60

Причина этого в том, что любая строка в тегах ng фактически оценивается как угловое выражение. '' говорит, что это строковое выражение.

Gepsens

37

@Gepsens: это имеет смысл, когда вы знаете. Было бы неплохо, если бы в документации упоминалось об этом.

Джейкоб

1

Да, теперь я знаю, почему они говорят «строка» ... Спасибо + Джейкоб за находку

Shadoweb

7

Я согласен, нам определенно нужны усилия по документированию Angular и системы верстки.

Gepsens

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-адрес находился в корневом каталоге приложения, а не в том же каталоге, где находится файлpart.html. (тогда как part.html - это файл представления, в котором можно найти встроенный тег разметки ng-include).

Например:

Правильно: 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.

Джейкоб

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

Джейсон Спик

10

Для тех, кто ищет самое короткое из возможных решений для рендеринга элементов, поэтому комбинирование ng-repeat и ng-include :

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

На самом деле, если вы используете его таким образом для одного ретранслятора, он будет работать, но не для 2 из них! Angular (v1.2.16) по какой-то причине взбесится, если у вас есть 2 из них один за другим, поэтому безопаснее закрыть div пре-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:

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

Рохит Парте
источник

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

Ответы: