如何告诉AngularJS“刷新”


168

我有一个click事件发生在我的自定义指令范围之外,因此,我使用jQuery.click()侦听器并在我的范围内调用一个函数,而不是使用“ ng-click”属性,如下所示:

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

close()是一个简单的函数,如下所示:

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

在我看来,我有一个绑定到isOpen的“ ng-show”元素,如下所示:

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

调试时,我发现正在调用close(),isOpen被更新为false,但是AngularJS视图没有更新。有没有办法手动告诉Angular更新视图?还是有一种解决我所未见的“角度”解决方案?

Answers:


315

解决的办法是打电话给...

$scope.$apply();

...在我的jQuery事件回调中。



6
那不是$scope.$apply();吗?
ErichBSchulz,2015年

您可以使用$ scope或作用域,这只是一种符号上的差异,但结果相同。
user1226868 2015年

4
@ErichBSchulz-通常在指令中,我看到使用了没有$的作用域,我相信这可能会区别于它和注入到控制器中的“ $ scope”。在控制器中,使用$ scope进行引用很重要,因此Angular知道要注入的依赖项,而在指令链接函数中,它总是按序数传递相同的4个元素,并且不需要特定的名称(scope,element,attrs,controller )。
cchamberlain 2015年

30

为什么 $apply要叫?

TL; DR$apply每当您要应用 Angular世界之外进行的更改时,都应调用TL; DR


只是为了更新@达斯汀的回答,这里是一个说明什么 $适用究竟做和为什么它的工作原理。

$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路由器时,请务必使用$state.reload()
Jeffrey Roosendaal

这对于我们的屏幕截图测试非常有帮助!我们模拟状态,但有时不一定有观察者来监视更改,这可能导致混乱的故障或间歇性故障。但是能够像这样重新加载示波器有助于解决这一问题。
theblang
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.