2017-12-27 20 views
0

オンクリック(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> 

答えて

1

$intervalはまだ動作しますはい、この場合では、手動で$interval.cancelとき$scope.$on('$destroy'...を経由して、それを停止する必要があります:

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

 
    $scope.$on('$destroy',() => { 
 
     $interval.cancel(stopTime); 
 
    }); 
 
    })
<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>

P.S.具体的には、$intervalの代わりに$timeoutを使用する方がよいでしょう。

+0

これは機能しません。私はブラウザが状態に戻ったときに問題が発生するので手動で破棄することはできません。私は状態ロードのための$ onInit関数で '' $ interval.cancel(goToFeed) '' 'を実行しようとしても、これはうまくいきません。 – MrJonesIsMe

関連する問題