【问题标题】:How can I tell AngularJS to "refresh"我怎样才能告诉AngularJS“刷新”
【发布时间】: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 更新视图?或者有没有更“角度”的方法来解决我没有看到的这个问题?

【问题讨论】:

    标签: javascript angularjs


    【解决方案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()1。我们几乎从不直接调用它,因为我们使用$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 个元素,并且不需要特定名称(范围、元素、属性、控制器)。
        猜你喜欢
        • 2018-06-28
        • 2011-07-18
        • 2017-08-12
        • 1970-01-01
        • 2014-06-22
        • 2020-03-03
        • 2020-04-02
        • 1970-01-01
        • 1970-01-01
        相关资源
        最近更新 更多