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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-23 07:40:02  来源:igfitidea点击:

How can I tell AngularJS to "refresh"

javascriptangularjs

提问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 $applyshould be called?

为什么$apply要叫?

TL;DR: $applyshould 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 $watchliving 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 $routeto your controller.

记得注入$route你的控制器。