AngularJSに「更新」を指示するにはどうすればよいですか


168

カスタムディレクティブのスコープ外で発生するクリックイベントがあるため、 "ng-click"属性を使用する代わりに、jQuery.click()リスナーを使用して、スコープ内で次のように関数を呼び出します。

$('html').click(function(e) {
  scope.close();
);

close()は、次のような単純な関数です。

scope.close = function() {
  scope.isOpen = false;
}

私の見解では、「ng-show」がisOpenに次のようにバインドされた要素があります。

<div ng-show="isOpen">My Div</div>

デバッグ時に、close()が呼び出されていること、isOpenがfalseに更新されていることがわかりましたが、AngularJSビューは更新されていません。Angularに手動でビューを更新するように指示する方法はありますか?または、この問題を解決するために私が見ないより「角度のある」アプローチはありますか?

回答:


315

解決策は電話することでした...

$scope.$apply();

...私のjQueryイベントコールバックで。


9
このリンクは参考になると思います。jimhoskins.com/2012/12/17/angularjs-and-apply.html
Roman Sklyarov 2013

6
それはいけません$scope.$apply();か?
ErichBSchulz、2015

$ scopeとスコープの両方を使用できます。これは単なる表記の違いですが、結果は同じです。
user1226868 2015

4
@ErichBSchulz-多くの場合、ディレクティブで、$なしでスコープが使用されていることがわかります。これは、コントローラーに注入される '$ scope'とそれを区別する可能性が高いと思います。コントローラでは、Angularが注入する依存関係を認識できるように$ scopeで参照することが重要ですが、ディレクティブリンク関数では常に同じ4つの要素を序数で渡し、特定の名前(スコープ、要素、属性、コントローラ)を必要としません)。
チェンバレン2015年

30

なぜ$apply呼び出す必要がありますか?

TL; DR: Angularの外部$apply行われた変更を適用したいときはいつでも呼び出す必要があります。


@Dustinの答えを更新するためだけに、$ applyが正確に何を するなぜ機能するかを説明します

$apply()AngularJSフレームワークの外部からAngularJSで式を実行するために使用されます。(たとえば、ブラウザのDOMイベント、setTimeout、XHR、またはサードパーティのライブラリから)。我々はAngularJSフレームワークに呼び出しているので、私たちはの適切なスコープのライフサイクルを実行する必要がある 例外処理を時計を実行します

Angularでは、任意の値をバインディングターゲットとして使用できます。次に、JavaScriptコードターンの最後に、値が変更されたかどうかを確認します。バインディング値が実際に変更されたかどうかを確認するステップには、メソッド$scope.$digest()1があります。$scope.$apply()代わりに使用するため、直接呼び出すことはほとんどありません(これによりが呼び出されます$scope.$digest)。

Angularは、式で使用される変数と$watch、スコープ内の生活の中で何かを監視するだけです。したがって、Angularコンテキストの外でモデルを変更する場合は$scope.$apply()、それらの変更を伝達する必要があります。そうしないと、Angularは変更が変更されたことを認識しないため、バインディングは更新されません2


14

使用する

$route.reload();

$routeコントローラーに注入することを忘れないでください。


5
また、ui-routerを使用するときは、必ず使用してください$state.reload()
Jeffrey Roosendaal 2017

これはスクリーンショットテストに非常に役立ちました。状態をモックアウトしますが、変更を監視するウォッチャーが必ずしも存在しない場合があります。これにより、混乱した障害または断続的な障害が発生する可能性があります。ただし、このようにスコープを再読み込みできると、これに対抗できます。
theblang
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.