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

397

Я пытаюсь включить фрагмент HTML внутри ng-repeat, но я не могу заставить include работать. Кажется, текущий синтаксис 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, ссылающиеся на script s id, и все еще ничего.

На моей странице было намного больше, но теперь Ive разделил это на следующее:

<!-- 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" в инструментах dev, она приведет меня к моему шаблону (и отобразит foo).

Теги:
include
repeater

8 ответов

727
Лучший ответ

Вам нужно оцифровать вашу строку src внутри двойных кавычек:

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

Источник

  • 4
    да, этот кусочек меня на днях. Несколько связанный ответ stackoverflow.com/questions/13811948/…
  • 60
    Причина этого заключается в том, что любая строка в тегах ng фактически оценивается как угловое выражение. '' говорит, что это строковое выражение.
Показать ещё 8 комментариев
126
    <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="'...'" определенно выглядит лучше.
  • 0
    так что я предполагаю, что ng-include не существует в формате комментариев?
50

Для устранения этой проблемы важно знать, что ng-include требует, чтобы URL-адрес был из корневого каталога приложения, а не из того же каталога, где живет partial.html. (в то время как partial.html - это файл представления, который можно найти в теге разметки inline ng-include).

Например:

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

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

  • 5
    На самом деле, это не совсем правильно: путь МОЖЕТ быть относительным, но он относителен к html-файлу, из которого было создано приложение. В вашем «неправильном» примере это сработало бы, если бы add-more.html находился в том же каталоге, что и app.html . В моем ответе views/ находится в том же каталоге, что и app.html .
  • 0
    В случае с Laravel и размещением структуры в общей папке (public / app / templates / include) и вызывающим файлом (public / app / templates / index.php) необходимо указать путь включения (app / templates / include) /filetoinclude.php). Я не мог получить по отношению к работе.
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>
9

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

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

Собственно, если вы используете его как один для одного ретранслятора, он будет работать, но не будет для 2 из них! Angular (v1.2.16) по какой-то причине будет волноваться, если у вас есть 2 из них один за другим, поэтому безопаснее закрыть div способом pre-xhtml:

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

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 ) должен быть настроен в вашем роутере.
  • 0
    @jacob так как бы вы загрузили это как маршрут ?? потому что я могу загрузить свое представление, и я могу заставить мой контроллер срабатывать, но они не подключены, просмотр загружен
Показать ещё 4 комментария
0

В ng-build ошибка файла не найдена (404). Таким образом, мы можем использовать приведенный ниже код

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

поставленный,

<div ng-include="'views/transaction/test.html'"></div>
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>

Ещё вопросы

Сообщество Overcoder
Наверх
Меню