外部jsonファイルからパスを取得して動的にHTMLテンプレートをロードする方法

Question

いくつかの説明が含まれている動的HTMLテンプレートを読み込む際に問題が発生します。私が持っている基本的な要件は、特定のボタンをクリックすると、対応するHTMLファイルをロードする必要があるときです。 jsonファイルからパスを取得します。 私は私のコードを共有していると私は、JSONからURLを読み込み、表示することができるよしかし、私は、そのhtmlページ

＃index.htmlを

<div> 
{{descriptionUrl}} 

<div ng-include="'./api-data/{{descriptionUrl}}'"></div> 

</div> 

action.jsonの内容を表示することはできません

{ 
    "Product": [{ 

     "descriptionUrl":"view.html" 
    }, 
    { 
     "descriptionUrl":"add.html" 

    } 

    ] 

} 

#view.html 
<h1>view</h1> 

#add.html 
<h1>add</h1> 

Answer 1

まず、現在のスコープに対するあなたの式を評価NG-含まれています。したがって、固定パスを使用する場合は、引用符を使用して文字列リテラルにする必要があります。あなたは、パスを動的にロードする場合は、最初の有効なパスは、あなたは、あなたがより扱いコーディングしたい場合は、この

ng-include="'partial_path_1' + any_value_in_scope + 'again_fixed_path.html'" 

のようなパスを作成したりすることができますいずれか、

ng-include="'fixed_path'"

です単に、あなたの質問に答えるために

ng-include="returnPathFromScope()" 

を置くことができます

ng-include="'/api-data/' + descriptionUrl" 

Answer 2

動的な動作のためには、以下のようにng-includeをsrcと一緒に使用してください。

<ng-include src="{{your url}}"></ng-include> 

参考：すべてのhttps://docs.angularjs.org/api/ng/directive/ngInclude