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

Я пытаюсь включить фрагмент 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>

заголовок отображается, но тогда мой шаблон этого не делает. Я не получаю ошибок в консоли или из узла, и если я нажму ссылку в src="views/sidepanel.html" в dev tools он принимает меня к моему шаблону (и отображает foo).

395
angularjs html5 include javascript repeater

7 ответов

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

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

источник

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

132

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

например:

исправить: div ng-включить src= "' / views / partials/tabSlides / add-more.HTML-код' ">

неправильные: div ng-включить src= "' добавить-больше.HTML-код' ">

48

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

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

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

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

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-include src="'views/templates/drivingskills.html'"

полный div:

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

попробуй такое 

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