Question

在我的控制器中，基于Angular1的mpbile应用程序具有（例如）以下功能：

2017/10/01 00:00

这很好..有一个问题..它没有更新。即使我切换页面并返回，如果范围没有改变，它也不会反映范围内的新数据。

所以，我建立一个$ interval刷新来查找范围的变化，这工作正常除外，当我离开页面去另一个时，该间隔保持轮询。对于数据和电池使用可能存在问题的移动应用来说，这显然是一个坏主意。

那么......我怎样才能继续检查“实时更改”的范围。当仅打开该页面时，或者范围刷新数据更改的最佳做法。

我已阅读有关摘要和应用的内容，但这些似乎仍然是间隔检查，我怀疑在切换页面后会继续操作。

或者对于包含实时数据的角度应用，我们会不断地在API中查看要做的事情＆＃39; （诚然，页面提取的数据只有629字节，但我有几页可以保存实时数据，所以它会加起来）

由于

Answer 1

创建控制器时，会声明其中的函数，但不会运行。并且因为在控制器的末尾，您正在调用getItem();它运行一次。移动到另一个页面，然后回来不会刷新它。

刷新的唯一方法是再次调用该函数，在HTML或JS中。

例如：

<button ng-click="getItem()">Refresh</button>

Answer 2

根据您使用的路由器，您必须告诉控制器在路由更改或更新时重新加载，因为在声明控制器时传递的功能只是工厂，并且一旦构建控制器，它就不会再次运行，因为路由器缓存它（除非你告诉angularjs这样做，这很少是一个好主意）。

所以最好的办法是在路线改变时使用路由器重新加载状态。您可以使用范围内广播的路由器事件更改和更新来执行此操作。

如果您使用angularjs' router（a.k.a.，ngRoute）：

$scope.$on('$routeChangeUpdate', getItem);
$scope.$on('$routeChangeSuccess', getItem);

如果您使用ui.router：

$scope.$on('$stateChangeUpdate', getItem);
$scope.$on('$stateChangeSuccess', getItem);

注意：在ui.router中，您可以在状态声明中添加cache: false，它会阻止控制器和视图被缓存。

Answer 3

非常好的问题，我一直想知道同样的事情，所以我检查了很多相关的SO帖子并写了一种可以使用的功能。

注意：我正在使用简单的console.log（）测试该函数，请插入您的函数逻辑并检查。

概念

$ interval用于重复运行函数（$ scope.getItem）一段时间（在下面的示例中持续1秒），超时也在积极运行以监视非活动时间，此参数由timeoutValue定义（在示例中设置为5秒），正在监视文档的多个事件，当触发任何事件时，超时被重置，如果超过timeoutValue时间而没有文档中的任何事件，则调用另一个函数，其中间隔为停止。然后在此后的文档中的任何事件中，间隔再次开始。

＆＃13;

var myModule = angular.module('myapp',[]);
myModule.controller("TextController", function($scope, $interval, $document, $timeout){
  //function to call
  $scope.getItem = function() {
    console.log("function");
  };
  
  //main function
  //functionName - specify the function that needs to be repeated for the intervalTime
  //intervalTime - the value is in milliseconds, the functionName is continuously repeated for this time.
  //timeoutValue - the value is in milliseconds, when this value is exceeded the function given in functionName is stopped
  
  monitorTimeout($scope.getItem, 1000 ,5000);
  	function monitorTimeout(functionName, intervalTime, timeoutValue){
      //initialization parameters
      timeoutValue = timeoutValue || 5000;
      intervalTime = intervalTime || 1000;
      // Start a timeout
      var TimeOut_Thread = $timeout(function(){ TimerExpired() } , timeoutValue);
      var bodyElement = angular.element($document);

      /// Keyboard Events
      bodyElement.bind('keydown', function (e) { TimeOut_Resetter(e) });  
      bodyElement.bind('keyup', function (e) { TimeOut_Resetter(e) });    

      /// Mouse Events    
      bodyElement.bind('click', function (e) { TimeOut_Resetter(e) });
      bodyElement.bind('mousemove', function (e) { TimeOut_Resetter(e) });    
      bodyElement.bind('DOMMouseScroll', function (e) { TimeOut_Resetter(e) });
      bodyElement.bind('mousewheel', function (e) { TimeOut_Resetter(e) });   
      bodyElement.bind('mousedown', function (e) { TimeOut_Resetter(e) });        

      /// Touch Events
      bodyElement.bind('touchstart', function (e) { TimeOut_Resetter(e) });       
      bodyElement.bind('touchmove', function (e) { TimeOut_Resetter(e) });        

      /// Common Events
      bodyElement.bind('scroll', function (e) { TimeOut_Resetter(e) });       
      bodyElement.bind('focus', function (e) { TimeOut_Resetter(e) });

      function TimerExpired(){
        if(theInterval) {
          $interval.cancel(theInterval);
          theInterval = undefined;
        }
      }

      function TimeOut_Resetter(e){
          if(!theInterval){
            theInterval = $interval(function(){
              functionName();
            }.bind(this), intervalTime);
          }

          /// Stop the pending timeout
          $timeout.cancel(TimeOut_Thread);

          /// Reset the timeout
          TimeOut_Thread = $timeout(function(){ TimerExpired() } , timeoutValue);
      }

      var theInterval = $interval(function(){
        functionName();
      }.bind(this), intervalTime);
    }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myapp">
    <div ng-controller="TextController">
    </div>
</div>

＆＃13;

远程更改数据后刷新范围

3 个答案: