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

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

Ответы

Ответ 1

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

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

Источник

Ответ 2

    <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

Ответ 3

Для устранения этой проблемы важно знать, что 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'" >

Ответ 4

Для тех, кто ищет кратчайшее решение "рендеринга элементов" из частичного, поэтому комбо 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>

Ответ 5

Возможно, это поможет начинающим

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

Ответ 6

Это сработало для меня:

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>

Ответ 8

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

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

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

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