2012-07-03 34 views
16

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

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

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

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

+1

「アプリ」の角型アプリ(それぞれに「ng-app」宣言がありますか?)または同じアプリの異なるコントローラ/ビューのみですか?コントローラ/ビューが異なる場合は、appListをナビゲーションとして使用し、 '$ routeProviders'(http://docs.angularjs.org/api/ng.$ro​​uteProvider)を設定してさまざまなビューを管理します。 –

+0

おそらく私が試みていたものより優れた解決策ですが、私はまだAngularには新しいので、試してみます。ありがとう。 – Zoey

答えて

4

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

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

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

+0

これは本当に便利だと思います!私の答えはAngularの初期の開発からのものでしたが、これは存在しませんでした。他の人は、これが当てはまるべきではないとコメントすることは自由ですが、これは正解です。受け入れられました。 – Zoey

+1

これらのこと(AngularJSエコシステム)は、彼らが進化していることがうれしいです。 –

+0

記録のために、私は自分のプロジェクトでこの解決策を試しましたが、それは非常に便利です。存在しないルートへのナビゲーションなどのいくつかの問題がありますが、中程度の深さのドキュメントに隠されていることは、ルートが存在しないときにそれを処理できる方法を検出する手段です。一般的なシナリオとして、私はこのソリューションを誰かに使ってみることをお勧めします。公式のRouteプロバイダをAngularからスキップすることをお勧めします。 – Zoey

25

$ 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. 

、私は願っています。

6

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

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

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

+0

これは「公式の」代替案ですが、私の元の問題のようにコントローラの階層構造を必要とする状況では現在機能しません。 – Zoey

関連する問題