Angular：组件视图上的数据仅在执行单击操作时更新

Posted 2023-02-23

【中文标题】Angular：组件视图上的数据仅在执行单击操作时更新

【英文标题】：Angular: Data on Component's View Only Update When Performing Click Action

【发布时间】：2017-06-05 03:42:15

【问题描述】：

我从 Angular 1 的教程中复制了一个示例：

https://plnkr.co/edit/I48XFq

2 个控制器（MainCtrl 和 AltCtrl）从一个 dataService 引用相同的 Hero 数据 MainCtrl 和 AltCtrl 使用 heroDetail 组件来呈现数据视图

我的设置：

dataService 使用 setInterval 每 3 秒更新一次 data.time（我试图不使用 Angular 的 $interval 来获取在视图上呈现的数据）

    .factory('dataService', function() 
      var data = ;
    
      data.location = "Safe House";
      data.count = 0;
    
      data.time = new Date();
      setInterval(function() 
        data.time = new Date();
        data.count++;
      , 1000);
    
      data.updateLocation = function(origin) 
        if (origin === 'click') return;
        data.location = "Safe House #" + data.count;
      
    
      return data;
    );

在 heroDetail 视图中，我放置了一个调用 dataService.updateLocation('click') 的按钮。从这个按钮调用什么都不做，只是返回。

同样在 heroDetail 控制器中，有一个 setInterval 来调用 dataService.updateLocation('setInterval') 来实际更新 data.location

  function HeroDetailController(dataService) 
var $ctrl = this;
$ctrl.update = function() 
  dataService.updateLocation('click');


setInterval(function() 
  dataService.updateLocation('setTimeout');
, 3000);      

结果：

服务的数据虽然通过后台 setInterval 获取更新，但并未呈现在组件视图上 但是当我点击前端按钮时，数据会以最新的 udpate 呈现，尽管按钮只是对数据不执行任何操作。

您能否帮助解释在这种情况下数据从服务更新到视图的原因和方式？

谢谢！

【参考方案1】：

使用内置的$interval 服务而不是window.setInterval 可能会解决您的问题。 AngularJs $interval documentation

要理解这个问题，首先要了解 javascript 事件循环。 Event loop explained here AngularJS $digest 循环基于事件循环，在每个摘要循环之后，它根据双向绑定到视图的模型更新 DOM。 $digest cycle explained here

【讨论】：

我知道 $interval 会起作用，但我只是想知道为什么单击按钮会导致 UI 更新，即使功能只是返回并且什么也不做。感谢您提供 $digest 循环解释链接，这对我来说是一个有价值的帖子。

我做了，另外还发现了this article，它给出了一个特定的信息：只要AngularJS认为有必要，就会调用$digest()函数。例如，在执行按钮单击处理程序之后。这意味着当按钮处理程序被执行时，即使处理程序什么也不做，但仍然调用一个新的摘要循环并使事情正常进行。

我现在明白你的意思了。您的 setInterval 匿名函数超出了角度世界；但 ng-click 事件在其中。

【参考方案2】：

我认为您应该在“setInterval”函数中添加以下代码行： data.location = "安全屋#" + data.count;

希望这会有所帮助。

【讨论】：

请编辑您的答案以提供更多详细信息并解释为什么这是一个解决方案。

我认为情况并非如此。我只是想知道为什么按钮单击会生成 UI 更新，而 setInterval 不会。