動的 URL に基づいてコンテンツをロードする ng-include があります (期待どおりに動作します)。

問題は、コンテンツのenterとをアニメーション化しようとしているときに発生leaveします (Angular ドキュメントによると、これらは ng-include がアニメーション化のために提供する 2 つのイベントです)。

はenter期待どおりに機能していますが、leaveそうではありません。templateUrlコントローラーで が変更されると、コンテンツがすぐに消えます (フェードアウトではありません) 。

何か案は？

テストケース: http://plnkr.co/edit/dsG3gxFomAK8Q15Xfouj?p=preview

上記のテスト ケースは、ng-repeatディレクティブで 2 回レンダリングされたデータのリストです。1回は使用せずng-include、1回は使用しng-includeます。

CSS トランジションは、ディレクティブでサポートされている 3 つすべて ( enter、leave、およびmove ) のアニメーションに対してセットアップされます。を使用しないng-repeat場合、 3 つのアニメーションはすべて正常に動作しますが、 を使用してリスト内の各項目のテンプレートをロードする場合は、 Enterアニメーションのみが動作します。ng-includeng-include

これはバグだと確信していますが、よくわかりangular-animateません。ng-repeatとng-include組み合わせて使用​​するときに何か間違ったことをしている可能性があります。angular-animateソースコードを掘り下げて問題を修正しようとしましたが、できませんでした。私が（できれば本当に）考えたのは、ng-includeディレクティブがレンダリングされたすべてのアイテムのすぐ上にコメントノードを追加し、このノードがの働きng-repeatを捨てているということだけです。angular-animateこれは、2 つの実装の唯一の顕著な違いでもあります。

また、アニメーションが設定されていない場合でも、すべての機能が正常に動作することに注意してください。しかし、 を使用した例ng-includeでは、(アイテムを上下に移動するための) アニメーションがおかしくなるだけでなく、アイテムも移動しません。

これはバグですか？もしそうなら、既知の回避策はありますか? github で angular.js の問題を検索してみましたが、回避策が見つかりませんでした (見つけたものは機能しません)。これについて助けてくれてありがとう。

編集: この問題は、promise を使用してデータを通常のオブジェクトに解決する代わりに、ng-repeat \ ng-options を使用して関数の戻り値を反復しようとしたことが原因でした。

コード：

HTML:

上記はエラーなしで画面をフリーズします。

補間値を使用してみました

しかし、角度パーサーエラーが発生しました。

また、プリミティブ補間を使用しようとしましたが、運もありません:

layout.getPartialUriSafePrimitive - 部分的な URI を含む文字列が含まれています。

助けてくれてありがとう、私はしばらくの間 ng 1.2.x へのアップグレードを試みてきましたが、これまでのところ 1.2.2 で解決された多くの問題に遭遇しましたが、この特定の問題はまだ未解決のままです。

ng-include で次の問題が発生しています。私は何が欠けていますか？誰かが同様の問題を抱えていましたか？

1. テンプレートtest.htmlは含まれません。
2. <h1>Testing</h1>何度も何度も繰り返されます。
3. 私は次のことを得る
   Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting!
4. ブラウザーで html 要素を調べると、index.html 全体が ng-include によって再帰的に含まれていることがわかります。

私がやっているのは、index.htmlを取り除いた簡単なテストです

index.html

test.html

ブラウザで私は得る：

テスト

テスト

テスト

ブラウザで html を調べると、index.html が再帰的に含まれていることがわかります。

これは元の質問の編集です：

ディレクティブを使用ng-includeしてすべてのページでヘッダー HTML を再利用すると、トップ ナビゲーション バーの読み込み/レンダリングにわずかな遅延が発生します。問題を軽減するために、パーシャルを事前にロードするようにng-include含む header.html ファイルを指定しようとしています。<script type='text/ng-template' id='header.html>...</script>

しかし、私はそれを機能させることができないようです。header.html のコンテンツを index.html に直接貼り付けた場合にのみ成功しました。これは、ヘッダー コードを再利用する目的を無効にします。

スクリプトのドキュメントはインライン テンプレートの使用例のみを示しており、ngIncludeのドキュメントはテンプレートの例では使用していませんscript。

ngIncludeangularのscriptディレクティブを使用するファイルをロードできますか?

index.html:

header.html:

main.js:

私はこのようなことをすることができます:

<div ng-include="{{data}}Template"></div>
-- テンプレート URL に定数文字列を追加する必要があります。

ng-repeatを含むを使用しようとしていますng-include。問題は、ng-repeat の最初の要素がng-include、入力されたデータがまったく含まれていない単なるテンプレートであることです。最初の要素で機能するようng-repeatに、テンプレートを何らかの方法でバインドできる方法はありますか?ng-includeng-repeat

たとえば、myng-repeatに 10 個のアイテムが含まれている場合、レンダリングされる最初のアイテムは空のテンプレートになります。アイテム 2 ～ 10 は、本来あるべき姿でレンダリングされます。私は何を間違っていますか？

経由で挿入されるテンプレートがng-includeあり、そのテンプレートにもng-include. インナーng-incudeはお見せしておりません。なんで？

メイン テンプレート:

ビュー/outer.html: