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

Question

Каков правильный синтаксис 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" в инструменты разработчика, сколько мне потребуется, чтобы мой шаблон (и показывает foo).

641 7

javascript angularjs html5 include repeater

7 ответов:

Comments

Ничего не найдено.

jacob · Accepted Answer · 2015-03-10 13:04:42

вы должны в одной кавычке ваш src строку внутри двойных кавычек:
<div ng-include src="'views/sidepanel.html'"></div>
источник

Kalpesh Prajapati · Accepted Answer · 2014-06-23 16:59:47

    <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

Benjamin McFerren · Accepted Answer · 2014-01-02 19:26:59

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

например:

исправить: div ng-include src= "' /views/partials/tabSlides / add-more.html'">

неправильные: div ng-include src= "' add-more.HTML-код' ">

Balance · Accepted Answer · 2014-05-30 00:04:56

для тех, кто ищет кратчайшее решение" item renderer " от частичного, так что комбинация 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>

BG Bruno · Accepted Answer · 2014-09-10 00:43:33

может быть, это поможет для начинающих

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

Jackal · Accepted Answer · 2014-10-25 02:26:19

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

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

полный div:

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

jayaweb · Accepted Answer · 2016-02-15 13:20:15

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

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