2012-09-06 8 views
131

「ng-click」属性を使用する代わりにjQuery.click()リスナーを使用しているため、カスタム指示の範囲外で発生するクリックイベントが発生しました。AngularJSに「更新」する方法

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

近い()このようになります簡単な関数である:そうは次のように私のスコープ内の関数を呼び出す私の見解では

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

、私は「NG-ショー」バウンドを持つ要素を持っていますこのようにisOpenする:

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

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

答えて

243

ソリューションは、私のjQueryのイベントコールバックに... ...

$scope.$apply(); 

を呼び出すことでした。

+9

このリンクは参考になっだろう、と思います。 。 '; http://jimhoskins.com/2012/12/17/angularjs-and-apply.html – sorx00

+6

はそれは' $スコープ$)は(適用すべきではありませんか? – ErichBSchulz

+0

$ scopeまたはscopeの両方を使用することができます。表記の違いだけですが、同じ結果になります。 – user1226868

10

使用

$route.reload(); 

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

+1

また、ui-routerを使用する場合は、必ず '$ state.reload()'を使用してください。 –

12

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

TL; DR:あなたはアンギュラ世界の外を行った変更を適用したいとき $applyを呼び出す必要があります。


だけ@Dustin's answerを更新するために、ここでは正確に行い、それが動作なぜ$applyの説明があります。

$apply()はAngularJSフレームワーク の外部からAngularJSでの発現を実行するために使用されます。 (たとえば、ブラウザのDOMイベントから、 setTimeout、XHR、または第三者のライブラリ)。 にAngularJSフレームワークを呼び出すため、適切なスコープライフサイクルを実行して exception handling,executing watchesを実行する必要があります。

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

角度は、式で使用される変数とスコープ内にある$watchの内部のもののみを監視します。Angularコンテキストの外でモデルを変更する場合は、これらの変更が伝播されるように$scope.$apply()を呼び出す必要があります。そうでない場合、Angularは変更されたことを知らず、したがってバインディングは更新されません。2

+1

説明付きの解答が気に入っています。ありがとうございました。 – cheshireoctopus

関連する問題