Javascript 我如何告诉 AngularJS“刷新”
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/12304728/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I tell AngularJS to "refresh"
提问by Dustin
I have a click event that happens outside the scope of my custom directive, so instead of using the "ng-click" attribute, I am using a jQuery.click() listener and calling a function inside my scope like so:
我有一个在我的自定义指令范围之外发生的点击事件,所以我没有使用“ng-click”属性,而是使用 jQuery.click() 侦听器并在我的范围内调用一个函数,如下所示:
$('html').click(function(e) {
scope.close();
);
close() is a simple function that looks like this:
close() 是一个简单的函数,如下所示:
scope.close = function() {
scope.isOpen = false;
}
In my view, I have an element with "ng-show" bound to isOpen like this:
在我看来,我有一个“ng-show”绑定到 isOpen 的元素,如下所示:
<div ng-show="isOpen">My Div</div>
When debugging, I am finding that close() is being called, isOpen is being updated to false, but the AngularJS view is not updating. Is there a way I can manually tell Angular to update the view? Or is there a more "Angular" approach to solving this problem that I am not seeing?
调试时,我发现 close() 被调用,isOpen 被更新为 false,但 AngularJS 视图没有更新。有没有办法可以手动告诉 Angular 更新视图?或者是否有更“角度”的方法来解决我没有看到的这个问题?
回答by Dustin
The solution was to call...
解决方案是调用...
$scope.$apply();
...in my jQuery event callback.
...在我的 jQuery 事件回调中。
回答by Mistalis
Why $apply
should be called?
为什么$apply
要叫?
TL;DR:
$apply
should be called whenever you want to apply changes made outsideof Angular world.
TL;DR:
$apply
应该在您想要应用在Angular 世界之外所做的更改时调用。
Just to update @Dustin's answer, here is an explanation of what$applyexactly does and whyit works.
只是为了更新@Dustin 的回答,这里解释了$apply究竟做了什么以及它为什么起作用。
$apply()
is used to execute an expression in AngularJS from outside of the AngularJS framework. (For example from browser DOM events, setTimeout, XHR or third party libraries). Because we are calling into the AngularJS framework we need to perform proper scope life cycle of exception handling, executing watches.
$apply()
用于从 AngularJS 框架之外执行 AngularJS 中的表达式。(例如来自浏览器 DOM 事件、setTimeout、XHR 或第三方库)。因为我们正在调用 AngularJS 框架,所以我们需要执行异常处理、执行监视的适当范围生命周期 。
Angular allows any value to be used as a binding target. Then at the end of any JavaScript code turn, it checks to see if the value has changed.
That step that checks to see if any binding values have changed actually has a method, $scope.$digest()
1. We almost never call it directly, as we use $scope.$apply()
instead (which will call $scope.$digest
).
Angular 允许将任何值用作绑定目标。然后在任何 JavaScript 代码循环结束时,它会检查该值是否已更改。检查任何绑定值是否已更改的步骤实际上有一个方法$scope.$digest()
1。我们几乎从不直接调用它,而是使用它$scope.$apply()
(它将调用$scope.$digest
)。
Angular only monitors variables used in expressions and anything inside of a $watch
living inside the scope. So if you are changing the model outside of the Angular context, you will need to call $scope.$apply()
for those changes to be propagated, otherwise Angular will not know that they have been changed thus the binding will not be updated2.
Angular 只监控表达式中使用的变量和$watch
作用域内的任何东西。因此,如果您在 Angular 上下文之外更改模型,则需要调用$scope.$apply()
这些更改来传播,否则 Angular 将不知道它们已更改,因此绑定不会更新2。
回答by test30
Use
用
$route.reload();
remember to inject $route
to your controller.
记得注入$route
你的控制器。