Angularjs 如何在引导模式打开时停止超时，并在模式关闭后恢复？_Angularjs_Twitter Bootstrap

Angularjs 如何在引导模式打开时停止超时，并在模式关闭后恢复？

angularjs twitter-bootstrap

Angularjs 如何在引导模式打开时停止超时，并在模式关闭后恢复？,angularjs,twitter-bootstrap,Angularjs,Twitter Bootstrap,我有一段代码，每1秒从数据库中获取数据： app.controller("rfController", ['$scope', '$http', '$timeout', function ($scope, $http, $timeout) { $scope.displayData = function () { $http.get('db.php').success(function(data) { $scope.refreshes = data

我有一段代码，每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（）函数会一直刷新。以下是modal的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>


更多
&时代；
{{refresh.company}}
状态：{{refresh.Status}
时间戳：{{refresh.dt}
OrgID:{{refresh.OrgID}
正文：{{refresh.Body}
接近

有什么想法吗？

在控制器中，变量名是$scope.refreshes。在html中，您正在从“刷新”获取数据。可能是个问题

$timeout也会延迟函数的执行，它不会每隔1秒重复调用displaydata函数。它只会在1秒后调用一次

您应该改用$interval。

试试这个。这将在modal打开时停止间隔

您必须使用setInterval反复调用函数， $timeout仅在给定时间后执行一次


更多
&时代；
{{refresh.company}}
状态：{{refresh.Status}
时间戳：{{refresh.dt}
OrgID:{{refresh.OrgID}
正文：{{refresh.Body}
接近
var-app=angular.module（'myApp'，[]）；
app.controller（“rfController”、[“$scope”、“$http”、“$timeout”、函数（$scope、$http、$timeout）{
$scope.runInterval=true；
$scope.displayData=函数（）{
$http.get（'http://localhost）。成功（函数（数据）{
$scope.refreshes=数据；
控制台日志（数据）；
});
console.log（“displayData”）；
};
setInterval（函数（）{
if（$scope.runInterval）{
$scope.displayData（）；
控制台日志（“完成”）；
}
},1000)
}]);

问题在于没有执行刷新。问题是，当我打开我的模式文件时，刷新并没有停止。有什么想法吗？在你的代码中，angular是如何知道模式被打开的？这应该使用

$interval

而不是

setInterval

。检查按钮代码，我正在对其应用一个变量，当你点击打开模式按钮时，该变量变为“false”，因此间隔停止，当你关闭模式时，我再次将该变量设置为true，所以间隔时间又开始运行了，对。它就是要这样做的。等待1秒钟，然后再次执行displayData（）本身。所以它的工作原理是一样的$scope.refreshes不是问题，因为我正在刷新中执行ng repeat=refresh。但问题不是刷新-更多的是模式问题。。。自动刷新必须在模式打开后停止，并在模式关闭时恢复。

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