ページ内のAngularJSテンプレートを動的に読み込みます。

Question

私は、2つのコントローラ、いわゆる「アプリ」のリストを管理するページと、新しいAngularテンプレートをDivエレメントのinnerHTMLに配置するページを持っています。

<div ng-controller="appList"></div> 
<div ng-controller="appPane"> Dynamic content should be loaded here! </div> 

私は、標準の{{表現}}バインディングを使用してみましたが、彼らは、HTMLでは動作しません、私はまた、アプリケーションのようにinnerHTMLプロパティをバインド（NG-バインド-HTML-危険なディレクティブを試してみました要求の戻り値）、コントローラはこの新しいコード内で実行されません。

問題は、Bindingを使用することによって、問題のhtmlのコンテンツを再解析せず角度アプリとして使用することにあると思われます。どのように動的なコンテンツを解析するための取得の任意のアイデアですか？

Answer 1

は（AngularUIプロジェクトから）uiRouterモジュールを見てみましょう。それは、ルートにかなり似ているが、それらを入れ子にする能力などの他の良いものと同様の状態の概念を加える。たとえば：あなたは/mystate/somethingに行くと、あなたは、パラメータとしてその「何かを」（$stateParamsを参照）を使用することができますいつでも

$stateProvider 
    .state('myState', { 
     url: '/mystate', 
     templateUrl: '...', 
     controller: 'MyCtrl' 
    }) 
    .state('myState.substate', { 
     url: '/{substate}', 
     templateUrl: '...', 
     controller: 'MySubCtrl' 
    }); 

MySubCtrlが有効になります。状態を任意のレベルにネストすることができます。

Answer 2

$ compileサービスは、現在のスコープとともに再コンパイルしたい要素を与えられたときに、私が探していたことをしているようです。私のソースから

例：これは誰もが私の問題を経験して助けるべき

var appPane = $('#AppPane');//JQuery request for the app pane element. 
appPane.html(data);//The dynamically loaded data 
$compile(appPane.contents())($scope);//Tells Angular to recompile the contents of the app pane. 

、私は願っています。

Answer 3

$routesとangularjsのngViewを見てください。ここで

は非常に基本的な例です：

http://jsfiddle.net/pXpja/3/