ng-include компилируется в комментарий

У меня есть угловое приложение, и я хочу добавить в шаблон другие элементы в виде div. ng-include показался идеальным выбором.

В main.html

<div id="page-wrapper">
<div ng-include src="'/partials/module.html'"></div>
</div>

В модуле.html

<div class="module">
<h1>Module</h1>
</div>

Все файлы находятся в папке partials в приложении.

При выполнении этого в месте html-кода я получаю <!-- ngInclude: -->, и заменяя div в main.html также поддерживаемым тегом ng-include, он компилируется в <!-- ngInclude: undefined -->.

Кто-нибудь знает, в чем может быть проблема?


angularjs angularjs-ng-include
person gombos    schedule 11.06.2014    source источник
comment
Проверьте сетевой трафик, посмотрите, куда идет HTTP-запрос для /partials/module.html. Наверное, это не правильный путь. Это должно быть относительно корня приложения, и я предполагаю, что это не так.   -  person ivarni    schedule 11.06.2014
comment
Можете ли вы опубликовать jsfiddle кода, вызывающего эту проблему?   -  person CuriousMind    schedule 11.06.2014
comment
Проверьте путь, если вы работаете на локальном хосте, попробуйте запустить localhost:8080/partials/module.html , это должно показать правильный html.   -  person Vamshi    schedule 11.06.2014
comment
Нет HTTP-запроса для /partials/module.html. В моем дереве есть корневая папка с app, js, sass и прочим, а в app лежит app.js, который роутит к шаблону. Маршрут к шаблону / — app/partials/main.html, и файл module.html тоже находится в той же папке. Каким тогда будет относительный путь к корню?   -  person gombos    schedule 11.06.2014

Ответы (5)


arrow_upward
18
arrow_downward

Вы используете src="" только при использовании ng-include в качестве элемента:

<ng-include src="'/partial.html'"></ng-include>

При использовании ng-include в качестве атрибута вы помещаете частичный URL прямо в сам атрибут:

<div ng-include="'/partial.html'"></div>

См. https://docs.angularjs.org/api/ng/directive/ngInclude для двух вариантов использования.

person Chad Robinson    schedule 04.10.2014
comment
Я использую второй вариант, но он все же компилируется для комментариев. Когда я помещаю div прямо в html, он работает. - person igreenfield; 19.11.2016

arrow_upward
6
arrow_downward

Через несколько часов я решил это для себя, все дело в использовании одинарных кавычек с использованием двойных кавычек.

<!--it will not work-->
<ng-include src="views/header.html"></ng-include>

<!--it will work :)-->
<!--Difference is single quotes along with double quotes around src string-->
<ng-include src="'views/header.html'"></ng-include>
person Neeraj Bansal    schedule 09.02.2017
comment
Я не знаю, почему за вас проголосовали, но это решило мою проблему. Спасибо. - person reika; 22.07.2017
comment
Не обязательно использовать одинарные кавычки внутри двойных кавычек. Это могут быть двойные кавычки в одинарных кавычках. Существенным моментом является то, что внутренние кавычки являются частью данных, а не частью разметки. - person Paul Rooney; 27.09.2018

arrow_upward
0
arrow_downward

Я столкнулся с точной проблемой, компилятор может не найти указанный вами путь src. удалить первый / в пути. компилятор автоматически добавит / к корневому контексту и попытается найти путь. Это сработало для меня.

<div ng-include src="'/partials/module.html'"></div>

заменить

<div ng-include src="'partials/module.html'"></div>
person Aslam anwer    schedule 11.03.2018

arrow_upward
0
arrow_downward

Я застрял в той же проблеме, ни одно из упомянутых выше решений не помогло мне решить проблему, и это съело мои целых два дня. Наконец я разобрался с помощью этой ссылки.

Также решение для выполнения этой работы требует следующих двух черт:

  1. частичный html должен быть заключен в одинарные кавычки
  2. во-вторых, необходимо указать полный путь к файлу, даже если файл находится в том же месте.

eg: 

ABC
|
---- DEF
      |
      --- abc.html
      --- partial.html

Итак, если abc.html имеет синтаксис ng-include, он должен быть таким, как показано ниже.

<div ng-include="'ABC/DEF/partial.html'"></div>
                     OR
<ng-include src="'ABC/DEF/partial.html'"></ng-include>
person Prashant Kumar    schedule 14.06.2019

arrow_upward
-1
arrow_downward

Это должно быть проблемой масштаба. Убедитесь, что объект $scope передан правильно, и не забудьте включить контроллеры и службы, относящиеся к партиалу, на главную страницу!

person sangeetha k p    schedule 12.06.2015