1. ホーム
  2. angularjs

AngularJSのバインディングとダイジェストはどのように機能するのですか?

2023-10-06 12:47:07

質問

AngularJSが他のJavaScript-MVCフレームワークと異なる点は、バインディングを使用してJavaScriptからHTMLにバインドされた値をエコーすることができる点です。Angularは、$scope変数に何らかの値を代入すると、これを自動的に行います。

しかし、これはどの程度自動なのでしょうか?時には、Angularがその変更を拾ってくれないことがあります。そのため、$scope.$apply() や $scope.$digest() を呼んで、Angularに変更を拾うように通知する必要があります。時々、これらのメソッドのいずれかを実行すると、エラーがスローされ、ダイジェストがすでに進行中であると表示されます。

バインディング({{ }}中括弧やng-attributesの中にあるもの)はevalでエコーされるので、これはAngularが常に$scopeオブジェクトをポーリングして変更を探し、そしてそれらの変更をDOM/HTMLに反映するためにevalを実行しているということでしょうか?それとも、AngularJSは変数の値が変更されたり、割り当てられたりしたときにトリガーされるイベントを発生させる魔法の変数を使うことを理解したのでしょうか?私はそれがすべてのブラウザで完全にサポートされているという話を聞いたことがないので、私はそれを疑う。

AngularJSはどのようにバインディングとスコープ変数を追跡しているのでしょうか?

どのように解決するのですか?

に加えて ドキュメントセクション に加えて、私たちは変更の可能性のあるすべてのソースを列挙することができると思います。

  1. HTML 入力によるユーザーとの対話 ( 'テキスト' , '数値' , 'url' , 'メール' , 'ラジオ' , 'チェックボックス' ). AngularJSでは inputDirective . text', 'number', 'url', 'email' 入力がバインドされます。 リスナーハンドラ を 'input' や 'keydown' イベントに割り当てることができます。リスナーハンドラ はスコープ.$applyを呼び出します。 . radio'と'checkbox'はクリックイベントのために同様のハンドラをバインドします。
  2. select要素によるユーザインタラクション。AngularJSでは selectDirective があり、'change' イベントで同様の動作をします。
  3. 定期的な変更には タイムアウトサービス も行う $rootScope.$apply() .
  4. イベントディレクティブ (ngClick など) でも スコープ.$apply .
  5. また、$httpは $rootScope.$apply() .
  6. AngularJSの世界以外での変更は、ご存知の通りscope.$applyを使用する必要があります。