如何在引導模式打開時停止Angular $ timeout，並在模式關閉後恢復？

我有這樣的代碼，從數據庫中每1秒獲取數據：

app.controller("rfController", ['$scope', '$http', '$timeout', function ($scope, $http, $timeout) { 

    $scope.displayData = function() { 

     $http.get('db.php').success(function(data) { 
      $scope.refreshes = data; 
      console.log(data); 
     }); 

     $timeout(function() { 
      $scope.displayData(); 
     },1000) 

    }; 

}]);

但問題是，我有一些按鈕，打開引導模態尋找到這些數據。當我打開模式時，它會一直關閉，因爲displayData（）函數會保持刷新。這裏是模式的HTML：

<div class="col-md-4 text-right"> 
    <button class="btn rf-btn" id="clicked" data-toggle="modal" data-target="#rfmodal{{$index}}">More</button> <!-- OPENS MODAL --> 
    <!-- MODAL --> 
    <div class="modal small fade" tabindex="-1" role="dialog" id="rfmodal{{$index}}"> 
     <div class="modal-dialog" role="document"> 
      <div class="modal-content"> 
       <div class="modal-header" 
        ng-class="{'bg-success': refresh.status === 'Successful', 
           'bg-fail': refresh.status === 'Failed', 
           'bg-delay': refresh.status === 'Delayed'}"> 
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"> 
         <span aria-hidden="true">&times;</span> 
        </button> 
        <h4 class="modal-title text-center">{{refresh.company}}</h4> 
       </div> 
       <div class="modal-body text-left"> 
        <p class="detail-text"><b>Status</b>: {{refresh.status}}</p> 
        <p class="detail-text"><b>TimeStamp</b>: {{refresh.dt}}</p> 
        <p class="detail-text"><b>OrgID</b>: {{refresh.orgid}}</p> 
        <p class="detail-text"><b>Body</b>: {{refresh.body}}</p> 
       </div> 
       <div class="modal-footer"> 
        <button type="button rf-btn" class="btn rf-btn" data-dismiss="modal">Close</button> 
       </div> 
      </div> 
     </div> 
    </div> 
</div>

任何想法？

來源

2017-06-02 jake

在控制器中，變量名稱是$ scope.refreshes。在html中，您正在從「刷新」中獲取數據。可能是一個問題？

另外$ timeout延遲了函數的執行，它不會每隔1秒重複調用displaydata函數，它只會在一秒鐘後調用它。

您應該使用$ interval代替。

來源

2017-06-02 17:54:02 Neel

對。這意味着要做到這一點。等待1秒鐘，然後再次執行displayData（）。所以它以同樣的方式工作。 $ scope.refreshes不是問題，因爲我正在執行ng-repeat =刷新刷新。但問題不在於刷新 - 更多的是模態問題......自動刷新必須在模式打開後停止，並在關閉時恢復。 – jake

試試這個。這將在模態打開時停止時間間隔。

而且您必須使用setInterval重複調用該函數， $ timeout只在給定時間後執行一次。

  <!DOCTYPE html> 
      <html> 
      <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> 
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
      <body> 

       <div ng-app="myApp" ng-controller="rfController"> 

        <div class="col-md-4 text-right"> 
         <button class="btn rf-btn" id="clicked" ng-click="runInterval = false" data-toggle="modal" data-target="#rfmodal{{$index}}" data-backdrop="static" data-keyboard="false">More</button> <!-- OPENS MODAL --> 
         <!-- MODAL --> 
         <div class="modal small fade" tabindex="-1" role="dialog" id="rfmodal{{$index}}"> 
          <div class="modal-dialog" role="document"> 
           <div class="modal-content"> 
            <div class="modal-header" 
            ng-class="{'bg-success': refresh.status === 'Successful', 
            'bg-fail': refresh.status === 'Failed', 
            'bg-delay': refresh.status === 'Delayed'}"> 
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"> 
             <span aria-hidden="true">&times;</span> 
            </button> 
            <h4 class="modal-title text-center">{{refresh.company}}</h4> 
           </div> 
           <div class="modal-body text-left"> 
            <p class="detail-text"><b>Status</b>: {{refresh.status}}</p> 
            <p class="detail-text"><b>TimeStamp</b>: {{refresh.dt}}</p> 
            <p class="detail-text"><b>OrgID</b>: {{refresh.orgid}}</p> 
            <p class="detail-text"><b>Body</b>: {{refresh.body}}</p> 
           </div> 
           <div class="modal-footer"> 
            <button type="button rf-btn" class="btn rf-btn" data-dismiss="modal" ng-click="runInterval = true">Close</button> 
           </div> 
          </div> 
         </div> 
        </div> 
       </div> 

      </div> 

      <script> 
       var app = angular.module('myApp', []); 
       app.controller("rfController", ['$scope', '$http', '$timeout', function ($scope, $http, $timeout) { 
        $scope.runInterval = true; 

        $scope.displayData = function() { 
         $http.get('http://localhost').success(function(data) { 
          $scope.refreshes = data; 
          console.log(data); 
         }); 
         console.log("displayData"); 
        }; 

        setInterval(function() { 
         if($scope.runInterval){ 
          $scope.displayData(); 
          console.log("Done"); 
         } 
        },1000) 

       }]); 
      </script> 

      </body> 
      </html>

來源

2017-06-02 17:59:13

問題是沒有執行刷新。問題是，當我打開我的模態刷新不會停止。有任何想法嗎？ – jake

在你的代碼中，角怎麼知道模態被打開？ – jake

這應該使用'$ interval'而不是'setInterval'。 – mikwat

如何在引導模式打開時停止Angular $ timeout，並在模式關閉後恢復？

回答

相關問題