我怎样才能告诉AngularJS“刷新”

Posted 2023-02-22

【中文标题】我怎样才能告诉AngularJS“刷新”

【英文标题】：How can I tell AngularJS to "refresh"

【发布时间】：2012-08-31 13:08:41

【问题描述】：

我有一个在我的自定义指令范围之外发生的单击事件，因此我没有使用“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 更新视图？或者有没有更“角度”的方法来解决我没有看到的这个问题？

【参考方案1】：

虽然以下对我有用：

$scope.$apply();

它需要更多的设置和使用.$on 和.$broadcast 才能工作或可能使用$.watch。

但是，以下代码需要的代码少得多，而且工作起来就像一个魅力。

$timeout(function() );

在更新范围变量后立即添加超时允许 AngularJS 意识到有更新并自行应用它。

【参考方案2】：

为什么要调用$apply？

TL;DR： $apply 应该在您想要应用在 Angular 世界外部所做的更改时调用。

---

只是为了更新@Dustin's answer，这里解释了什么 $apply 究竟做了什么以及为什么它有效。

$apply() 用于从外部执行 AngularJS 中的表达式 AngularJS 框架。 （例如来自浏览器 DOM 事件， setTimeout、XHR 或第三方库）。因为我们正在呼唤 我们需要执行适当的范围生命周期的 AngularJS 框架 exception handling, executing watches.

Angular 允许将任何值用作绑定目标。然后在任何 javascript 代码循环结束时，它会检查值是否已更改。 检查任何绑定值是否已更改的步骤实际上有一个方法，$scope.$digest()¹。我们几乎从不直接调用它，因为我们使用$scope.$apply() 代替（它将调用$scope.$digest）。

Angular 仅监视表达式中使用的变量以及位于作用域内的 $watch 内的任何内容。因此，如果您在 Angular 上下文之外更改模型，则需要调用 $scope.$apply() 以传播这些更改，否则 Angular 将不知道它们已被更改，因此绑定将不会更新^{@987654326 @}.

【参考方案3】：

使用

$route.reload();

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

【讨论】：

另外，在使用ui-router时，请务必使用$state.reload()

这对我们的截图测试非常有帮助！我们模拟出状态，但有时不一定有观察者来观察变化，这可能会导致混乱的故障或间歇性故障。但是能够像这样重新加载范围有助于解决这个问题。

【参考方案4】：

解决方案是调用...

$scope.$apply();

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

【讨论】：

我认为这个链接会很有帮助。 jimhoskins.com/2012/12/17/angularjs-and-apply.html

不应该是$scope.$apply();吗？

您可以同时使用 $scope 或 scope，这只是符号的区别，但结果相同。

@ErichBSchulz - 通常在指令中，我看到使用的范围没有 $ 我认为这可能会区分它和注入控制器的“$scope”。在控制器中，通过 $scope 引用很重要，因此 Angular 知道要注入什么依赖项，而在指令链接函数中，它总是按序号传递相同的 4 个元素，并且不需要特定名称（范围、元素、属性、控制器)。