Question

想法是在用户使用10秒后在特定页面上打开模式，并在用户离开页面时取消它。它在我刷新页面时有效，但当我导航到页面时，我的代码在加载时会取消$ interval。

在我的控制器中：

$rootScope.$on("$locationChangeStart", function(event, next, current) { 
            $interval.cancel(interval);
        });

$scope.openmodal = function () {
        interval = $interval(function () {
            var modalInstance = $uibModal.open({
              animation: $scope.animationsEnabled,
              templateUrl: 'modal.html',
              controller: 'ModalInstanceCtrl',
              size: 'lg',
            });             
        }, 10000, [1]);         
    }

$scope.openmodal();

问题是当来自不同状态的状态加载时，$ locationChangeStart被执行。当我只刷新浏览器时，$ locationChangeStart不会运行，模态将在10秒后打开。当从不同的状态加载时，如何阻止我的控制器调用$ interval.cancel（）方法？

Answer 1

$scope.$on('$stateChangeSuccess', function() { 
    $interval.cancel(interval);
});

请专门阅读ui-router部分events部分的文档。

Answer 2

每次在状态控制器中加载新状态时，都需要启动计时器。如果用户保持状态，将显示模态。但是如果用户在打开模态之前离开状态，则需要取消计时器，因为新状态将再次启动计时器的新实例。

$scope.$on('$destroy', function() {
            $interval.cancel(interval);
        });
var interval = $interval(function () {
        var modalInstance = $uibModal.open({
          animation: $scope.animationsEnabled,
          templateUrl: 'modal.html',
          controller: 'ModalInstanceCtrl',
          size: 'lg',
        });             
    }, 10000, [1]);

如何在AngularJS中退出状态时取消$ interval？

2 个答案: