Question

我有这个代码每隔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>

有什么想法吗？

Answer 1

在控制器中，您的变量名称是$ scope.refreshes。在html中，你从＆＃34;刷新＆＃34; 。可能有问题吗？

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

您应该使用$ interval。

Answer 2

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

你必须使用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>

如何在bootstrap模式打开时停止Angular $ timeout并在模态关闭后恢复？

2 个答案: