web-dev-qa-db-ja.com

ng-includeはコメントにコンパイルされます

angularアプリがあり、テンプレートに他のアプリをdivとして追加したい。ng-includeは完璧な選択のようだった。

Main.htmlで

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

Module.html内

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

すべてのファイルは、アプリのpartials-folderにあります。

これを実行すると、htmlコードの場所で<!-- ngInclude: -->が取得され、main.htmlのdivをサポートされているng-includeタグに置き換えると、<!-- ngInclude: undefined -->にコンパイルされます。

何が問題なのか誰か知っていますか？

angularjsangularjs-ng-include
18
gombos

Ng-includeを要素として使用する場合にのみsrc = ""を使用します。

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

Ng-includeを属性として使用する場合は、部分的なURLを属性自体に直接配置します。

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

2つのユースケースについては、 https://docs.angularjs.org/api/ng/directive/ngInclude を参照してください。

17
Chad Robinson

数時間後、私はそれを解決しました、二重引用符の間を使用して一重引用符を使用することがすべてです。

<!--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>
6
Neeraj Bansal

私は正確な問題に直面していました、コンパイラはあなたが提供したsrcパスを見つけられないかもしれません。パスの最初の/を削除します。コンパイラは自動的に/をルートコンテキストに追加し、パスを見つけようとします。それは私のために働いた。

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

と置換する

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

私は同じ問題で立ち往生しました、上記の解決策のどれも私が問題を解決するのを助けませんでした、そしてそれは私の丸2日を食べました。最後に私は このリンク の助けを借りて理解しました。

また、この作業を行うためのソリューションには、以下の2つの特性が必要です。

  1. 部分的なhtmlは一重引用符で囲む必要があります
  2. 次に、ファイルが同じ場所にある場合でも、ファイルのフルパスを指定する必要があります。

例えば：

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