2012-09-17 15 views
76

AngularJSを他のJavaScript-MVCフレームワークと区別することの1つは、バインディングを使用してJavaScriptからHTMLへのバウンド値をエコーする機能です。 Angularは、$ scope変数に値を代入すると、これを「自動的に」行います。AngularJSでの結合と消化はどのように機能しますか?

これはどのように自動ですか?場合によっては、Angularは変更を認識しないので、$ scopeを呼び出す必要があります。$ apply()または$ scope。$ digest()ときどきこれらのメソッドのいずれかを実行すると、エラーがスローされ、ダイジェストがすでに進行中であることが示されます。

括弧({{}}中か何かの中かっこ)はevalでエコーされるので、Angularは$ scopeオブジェクトを常にポーリングして変更を探し、その変更をプッシュする評価を実行します。 DOM/HTMLに?または、AngularJSは、変数値が変更されたときや割り当てられたときにトリガされるイベントを発生させる魔法の使用変数を何とか見つけ出しましたか?私はそれがすべてのブラウザによって完全にサポートされていることは聞いたことがないので、私はそれを疑う。

AngularJSは、そのバインディングとスコープ変数をどのように記録していますか?

+5

「これは、Hello Worldの例でデータバインディング効果がどのように達成されたかの説明です。」で始まるhttp://docs.angularjs.org/guide/concepts#runtimeのセクションが見つかりました。 –

+3

この投稿はあなたがまだ見ていない場合にも役立ちます:http://stackoverflow.com/questions/9682092/databinding-in-angularjs/9693933#9693933 – Gloopy

+0

最初の宣言的な段落についてのコメント:Angularの " JavaScriptからバインディングを使用したHTMLへの値」は、「データバインディング」と言うと混乱するように思えます。そして、現時点ではAngberをEmberやReactのような他のフレームワークとは別に設定していません。 質問は役に立ちます、間違ってはいけません。しかし、最初の段落は私が意見に反すると思うだけの意見です - 私は質問を編集するが、私は十分に権威的だとは思わない。 –

答えて

64

Markさんが見つけたdocumentation sectionに加えて、考えられるすべての変化の原因を列挙することができます。 HTML入力で

  1. ユーザーとの対話('text''number''url''email''radio''checkbox')。 AngularJSはinputDirectiveです。 'text'、 'number'、 'url'、 'email'入力は 'input'または 'keydown'イベントのためにlistener handlerを束縛します。リスナーハンドラcalls scope.$apply。 'radio'と 'checkbox'はclickイベントのハンドラをバインドします。
  2. 選択要素とのユーザー対話。 AngularJSはselectDirectiveで、 'change'イベントで同様の動作をします。
  3. $timeout serviceを使用して定期的に変更すると、$rootScope.$apply()となります。
  4. eventDirectives(ngClickなど)でもscope.$applyを使用してください。
  5. $ httpでも$rootScope.$apply()を使用します。
  6. AngularJSワールド外での変更は、スコープを使用する必要があります。
+2

+1を確認する必要があります。 $ httpも$ rootScope。$ apply()を使用します。アー。なぜ誰が彼らがこれをするのか知っていますか?これは非常に迷惑です... – gecco

5

ポーリングではなく、内部実行ループを使用しているので、$ apply()または$ digest()を使用して動作させる必要があります。

Miško's explanationは非常に徹底していますが、Angularは、自分のコンテキスト内で何かが発生したときに、$ scopeを明確な内部状態に戻そうとしています。これは、モデル状態の間でかなりバウンドするかもしれません。なぜなら、$ watch()を一度だけ呼び出すことに頼ることができない理由と、モデル間の関係を手動で設定することに慎重にすべき理由もあります。循環リフレッシュ。

+0

$ apply(someFn)はどのように機能しますか?適用反復が実行されるときsomeFnの内容は実行されますか? – matsko

+0

$ applyを使用すると、コードがAngularスコープで実行されます。これは、変更を消化することを通知するだけです。http://docs.angularjs.org/api/ng.$ro​​otScope.Scope#$ apply – dain

+0

$ digestとの衝突を避けたい場合は、ポイント「5」に対してhttps://groups.google.com/d/msg/angular/FJwxJ-XbJaE/1NavZNQBhf4J – dain

関連する問題