モーダルが閉じた後にブートストラップモーダルが開き、再開すると、Angular $ timeoutを停止する方法はありますか？

私は1秒ごとにDBからデータを取得し、このコードを持っている：

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関数を繰り返し呼び出すことはありません.1秒後に1回だけ呼び出します。

代わりに$ intervalを使用してください。

出典

2017-06-02 17:54:02 Neel

右。それはそうすることを意味しています。 1秒待ってdisplayData（）自体を再度実行してください。それは同じように動作します。リフレッシュでng-repeat = refreshを実行しているので、$ scope.refreshesは問題にはなりません。しかし、問題はリフレッシュではありません。モーダルの問題のほうが...オートリフレッシュは、モーダルが開いたら停止し、閉じたときに再開する必要があります。 – jake

お試しください。これは、モーダルが開いているときの間隔を停止します。

そして、関数を繰り返し呼び出すにはsetIntervalを使用する必要があります。 $ timeoutは指定された時間後に1回だけ実行されます。

  <!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

これは 'setInterval'ではなく' $ interval'を使うべきです。 – mikwat

モーダルが閉じた後にブートストラップモーダルが開き、再開すると、Angular $ timeoutを停止する方法はありますか？

答えて

関連する問題