web-dev-qa-db-ja.com

AngularJSテンプレートをページ内に動的にロードします

2つのコントローラーを含むページがあります。1つはいわゆる「アプリ」のリストを管理するもので、もう1つは新しいAngularテンプレートをDiv要素のinnerHTMLに配置するものです。

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

標準の{{expression}}バインディングを使用しようとしましたが、htmlでは機能しません。ng-bind-html-unsafeディレクティブ（innerhtmlをアプリリクエストの戻り値にバインドする）も試しましたが、コントローラーはそうではありません。この新しいコード内で実行されます。

問題は、バインディングを使用することにより、Angularは、問題のhtmlのコンテンツを再解析してangular appとして使用しないことです。動的コンテンツを解析する方法についてのアイデアはありますか？

dynamicdom-manipulationangularjs
16
Zoey

iRouter モジュール（ AngularUI プロジェクトから）を見てください。これは、ルートに非常に似ているが、それらをネストする機能などの他の優れた機能を備えた状態の概念を追加します。例えば：

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

MySubCtrlは、/mystate/somethingに移動するたびにアクティブになり、その「何か」をパラメーターとして使用できます（ $stateParams を参照）。状態を任意のレベルにネストできます。

4
Alejandro García Iglesias

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

これは私の問題を経験している人の助けになるはずです、私は願っています。

25
Zoey

Angularjsの $ routers とngViewを見てください。

非常に基本的な例を次に示します。

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

6
bearfriend