當控制器變爲背景（或無效）時需要停止正在進行的操作

Question

我正在編寫我的第一個AngularJS應用程序。着陸頁有兩個鏈接#/view1和#/view2。每個鏈接都會呼叫單個控制器分別渲染<div ng-view></div>。

view1Ctrl將定期從服務器獲取數據。我可以每X秒在控制檯中看到ajax調用。現在我點擊#/view2，應用程序應該使用view2Ctrl。我預計view1Ctrl不應再從服務器獲取數據。但實際上它確實如此。

.controller('View1Ctrl', function($scope, $http) { 
    $scope.update = function() { 
    $http.get('/api/foo') 
     .success(function(data) { /* got new data */ }) 
     .error(function(data) { /* error occurred */ }) 
     .finally(function() { 
     setTimeout($scope.update, 1000); 
     }); 
    } 
    $scope.update(); 
}); 

我有兩個問題：

1. 是控制器始終活躍在初始化操作之後。
2. 停止任何後臺控制器的最佳做法是什麼？我的想法是檢查$location.path()。

---

更新1：

控制器實際上是破壞。但操作update會自行調用它，所以操作將被稱爲無窮無盡。

我目前的解決方法將檢查當前位置是否已更改。所以它工作。我正在尋找更優雅的方式，如果它存在。

.controller('View1Ctrl', function($scope, $http) { 
    $scope.update = function(path) { 
    $http.get('/api/foo') 
     .success(function(data) { /* got new data */ }) 
     .error(function(data) { /* error occurred */ }) 
     .finally(function() { 
     if (path === $location.path()) { 
      setTimeout($scope.update, 1000, path); 
     } 
     }); 
    } 
    $scope.update($location.path()); 
}); 

---

更新2：

更好的方法是看破壞和取消正在進行的超時承諾。由於@pankajparkar

.controller('View1Ctrl', function($scope, $http, $timeout) { 
    var timeoutPromise; 
    $scope.$on("$destroy", function(){ 
    $timeout.cancel(timeoutPromise); 
    }); 
    $scope.update = function() { 
    $http.get('/api/foo') 
     .success(function(data) { /* got new data */ }) 
     .error(function(data) { /* error occurred */ }) 
     .finally(function() { 
     timeoutPromise = $timeout($scope.update, 1000); 
     }); 
    } 
    $scope.update(); 
}); 

Answer 1

我想你提到的body標籤或您的ng-view的父NG控制器，根據你的情況，你應該載入從$routeProvider處理它的控制器，

配置

app.config(function($routeProvider) { 
    $routeProvider 
    .when('/view1', { 
     templateUrl: 'view1.html', 
     controller: 'view1Ctrl' //load specific controller from here 
    }) 
    .when('/view2', { 
     templateUrl: 'view2.html', 
     controller: 'view2Ctrl' //load specific controller from here 
    }) 
    .otherwise({ 
     redirectTo: '/view1' 
    }); 
}); 

HTML

<div class="wizard"> 
    <ng-view></ng-view> 
    </div> 

以下是您的問題的答案。

1. 現在，當$routeProvider負載view1.html的view1Ctrl意志存在，一旦用戶導航到view2.html的view1Ctrl將停止其工作view2Ctrl將進入正如你所說，你的路由配置中的圖片。
2. 您應始終使用$routeProvider或$stateProvider（angular-ui-router）在您的應用程序內設置路由，並根據路由加載templates和controller。不需要檢查$location.path()

Working Plunkr

更新

你的問題是與重複的函數調用，這是在後臺運行，即使在控制範圍已從DOM消失。 重定向到其他控制器時清除此功能的最佳方法。 我建議你把你的$timeout承諾（你用setTimeout更改爲$timeout）在一個Java腳本變量，並取消，而離開（未註冊控制器）。當控制器$destroy事件被角度調度時，這就像控制器的destruct-or一樣，你可以使用它，你可以取消你的內部承諾$timeout。

CODE

var timeoutPromise = setTimeout($scope.update, 1000); 
$scope.$on("$destroy", function(){ 
    $timeout.cancel(timeoutPromise); 
}); 

Plunkr與取消的$timeout承諾。 Reference Link

希望這可以幫助你，謝謝。