2013-06-03 4 views
8
<html> 
<head> 
    <title></title> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.js"></script> 
</head> 
<body> 
    <div id="ajax-content-here"> 

    </div> 
</body> 
</html> 

私は本当に角度に新しいので、穏やかにしてください!角度を使用するのは、ajax経由でロードされたページのみです

したがって、アイデアは上記のタイトルに記載されているとおりです。私はヘッドセクションに角度ライブラリを含むページをロードします。後でajax(jquery)を使用してdivコンテナにデータ(下)をロードします。

<div id="angular-test"> 
    <div> 
     <label>Name:</label> 
     <input type="text" ng-model="yourName" placeholder="Enter a name here"> 
     <hr> 
     <h1>Hello {{yourName}}!</h1> 
    </div> 
</div> 

私は何とかAJAXリクエストが完了した後にのみ#angular-test容器の内部アクティブになるように角度を初期化したいと思います。スコープオブジェクトとは何か関係があると思いますか?

ありがとうございます!

+0

これから読んでください:http://stackoverflow.com/questions/14994391/how-do-i-think-in-angularjs-if-i-have -a-jquery-background – TheHippo

+0

私はそれを実際に読んだことがありましたが、私の場合、巨大なプロジェクトに新しいセクションを作成しています。このセクションでは角度を使用したいと思います。角を使って最初からすべてを書き直すことは今のところできないので、私は小さいものから始めたいと思います。それは可能でしょうか?誰かが以前にこの問題を抱えていた方法はありません。 – Krabats

+1

ajaxで取得したHTMLを使用するには、カスタム記述ディレクティブまたは全体の「ルーティングパッケージ」を使用します。まだ悪い考えのように聞こえる。 – TheHippo

答えて

9

Angularは、DOMContentLoadedイベントでDOMの読み込みが完了すると、初期化(ng-appとテンプレートのコンパイルを含む)を行います。 Angularは、DOMが変更され、AJAX応答を受け取った後にng-appがDOMに追加されることを知る方法がありません。

したがって、DOMが実際にファイナライズされた後(つまり、innerHTMLに割り当てられた後はjquery ajaxコールバック上にある)、手動でブートストラップを初期化することができます。

angular.bootstrap($('#ajax-content-here')); 

ajax-content-here内のコンテンツは、いくつかのng-appを参照すると仮定すると:コールバックでは、次のような何かを行います。 手動初期化セクションをご覧くださいhttp://docs.angularjs.org/guide/bootstrap

0
<div ng-app id="angular-test"> 

ng-app一部はangular-testの内側の角度が初期化されます。

+0

([demo](http://plnkr.co/edit/bUYMoRFUjOlRF1VgnDVr?p=preview))でも、AJAXがロードされているときにAngularによって初期化されるのではないかと疑います。 – robertklep

+0

私はこのアプローチも最初はやってみましたが、何もしませんでした。 – Krabats

関連する問題