Question

我有一个按钮，点击（ng-click），调用$ interval。如果我导航回包含带有浏览器后退按钮的按钮的状态，则再次调用$ interval。这是一个问题，因为间隔是$ state.go（）的计时器并再次更改状态。

我的代码如下。任何人都可以解释为什么会发生这种情况以及我如何重写它以允许通过浏览器进行向后导航而不会触发$ interval。提前谢谢。

控制器：

angular.module('app')
    .component('splash', {
      templateUrl: '/templates/splash.template.html',
      controller: SplashController
    })

  SplashController.$inject = ['SplashService', '$http', '$stateParams', '$state', '$interval']

  function SplashController(SplashService, $http, $stateParams, $state, $interval) {
    console.log("you are in the splash Controller")
    const vm = this
    vm.$onInit = onInit
    vm.userAuth = {}
    function onInit() {
      // $(".button-collapse").sideNav()
    }
    vm.logIn = function() {
      console.log('userAuth: ', vm.userAuth)
      SplashService.logIn(vm.userAuth)

    }

    vm.moveLotus = function() {
      let lotus_top = document.getElementById('animated-login-top')
      let lotus_bottom = document.getElementById('animated-login-bottom')
      // let menuIcon = document.getElementById('menuIcon')
      // menuIcon.style.display = 'none'
      lotus_top.className = 'animated-login-top-move move-lotus-top'
      lotus_bottom.className = 'lotus-login-bottom-pulse move-lotus-bottom'
      // wait 2 seconds and then &state.go('feed')
      let goTo = function(state) {
        $state.go(state)
      }
      $interval(function() {
        goTo('feed')
      }, 2500)
    }
  }

HTML：

<div class="row demoRow center">
    <a href="#" ng-click="$ctrl.moveLotus()">Demo Site</a>
</div>

Answer 1

是的，在这种情况下$interval仍然有效，您应该在$interval.cancel时通过$scope.$on('$destroy'...手动停止{<1}}：

＆＃13;

angular.module('app', [])
  .controller('ctrl', function($scope, $interval) {        
    var stopTime = $interval(function() {      
      console.log(new Date());
    }, 1000);

    $scope.$on('$destroy', () => {
      $interval.cancel(stopTime);
    });
  })

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app='app'>
  <button ng-click='show=!show'>{{show ? 'Destroy' : 'Create'}} controller</button>
  <div ng-controller='ctrl' ng-if='show'>        
    controller
  </div>  
</div>

＆＃13;

P.S。在您的特定情况下，最好使用$timeout代替$interval。

当浏览器导航回来时，将调用嵌套在ng-click侦听器内的$ interval

1 个答案: