Question

我想根据文本框的值动态刷新方法$scope.getPIRData，我有一个文本框，可以给我几秒钟的时间，例如3000毫秒，我需要进入setInterval块但我的文本框值未设置为window.refreshtime.

方法正在正确刷新，但是在选择下拉列表后，刷新机制不起作用，而仅在选择下拉列表之前它可以正常工作。

html

<input type="number"
                   ng-model="refreshtime"
                   ng-model-options="{ updateOn: 'blur' }"
                   ng-change="setupInterval()"
                   id="txtRefresh" name="name" />


<select class="form-control ng-pristine ng-valid ng-scope ng-empty ng-touched" ng-model="sel_val" ng-change="getPIRData(sel_val.deveui)" ng-options="data.details for data in pirs">Select PIR Device</select>

Java脚本

var app = angular.module('PIR_Detection', []);
    app.controller('myCtrl', function ($scope, $http, $window, $timeout) {
        $scope.sel_val = 0;
        $scope.DefaultLabel = "Loading.....";
        $scope.refreshtime = 1000;
        var post = $http({
            method: "get",
            url: "../data.json",
            dataType: 'json',
            data: {},
            headers: { "Content-Type": "application/json" }
        });
        post.success(function (data, status) {
            $scope.pirs = data;
        });
        post.error(function (data, status) {
        });

        $scope.getPIRData = function (id) {
            var url = "/PIRDetails/GetPIRStatus/" + id;
            $http.get(url)
                .then(function (response) {
                    $scope.myWelcome = response.data;
                    if ($scope.myWelcome != "") {
                        $scope.pirstatus = base64toHEX($scope.myWelcome.dataFrame);

                    }
                    $window.deviceId = id;
                })
                // next call will be made after the request
                .finally($scope.setupInterval);
        };

        let timeOut = null;
        $scope.refreshPIR = function () {
            if (timeOut) {
                // removes the previous timeout from event loop
                $timeout.cancel(timeOut);
            }

            console.log('timeout method call at ', $scope.refreshtime, 'ms');

            timeOut = $timeout(function () {
                if ($window.deviceId) {
                    $scope.getPIRData($window.deviceId);
                } else {
                    $scope.refreshPIR();
                }
            }, $scope.refreshtime);
        };

        //init
        $scope.refreshPIR();
    });

Answer 1

在setTimeout上使用setInterval，以获得对执行（https://weblogs.asp.net/bleroy/setinterval-is-moderately-evil）的更多控制。

AngualrJs内置了$timeout服务，该服务负责摘要周期。

var app = angular.module('PIR_Detection', []);

app.controller('myCtrl', function ($scope, $http, $window, $timeout) {
    $scope.sel_val = 0;
    $scope.DefaultLabel = "Loading.....";
    $scope.refreshtime = 1000;

    // commenting the data code, just for the solution demo
    /* var post = $http({
        method: "get",
        url: "../data.json",
        dataType: 'json',
        data: {},
        headers: { "Content-Type": "application/json" }
    });
    post.then(function (data, status) {
        $scope.pirs = data;
    });
    post.catch(function (data, status) {
    }); */

    $scope.getPIRData = function (id) {
        var url = "/PIRDetails/GetPIRStatus/" + id;
        $http.get(url)
            .then(function (response) {
                $scope.myWelcome = response.data;
                if ($scope.myWelcome != "") {
                    $scope.pirstatus = base64toHEX($scope.myWelcome.dataFrame);
                }
                $window.deviceId = id;
            })
            // next call will be made after the request
            .finally($scope.refreshPIR);
    };

    let timeOut = null;
    $scope.refreshPIR = function() {
      if(timeOut) {
        // removes the previous timeout from event loop
        $timeout.cancel(timeOut);
      }

      console.log('timeout method call at ',$scope.refreshtime, 'ms');

      timeOut = $timeout(function() {
        if($window.deviceId) {
          $scope.getPIRData($window.deviceId);
        } else {
          $scope.refreshPIR();
        }
      }, $scope.refreshtime);
    };


    //init
    $scope.refreshPIR();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="PIR_Detection" ng-controller="myCtrl">
    Refresh interval: 
  
  <!-- Used ng-model-options to fire the change event once user comes out the textbox-->
  <input type="number" 
  ng-model="refreshtime" 
  ng-model-options="{ updateOn: 'blur' }" 
  ng-change="refreshPIR()" 
  id="txtRefresh" name="name"/>
  
</div>

Answer 2

好吧，有两件事……首先，请注意$scope.refrestime中的拼写错误。话虽如此，这不会解决您的问题。 setInterval的间隔是在调用时设置的，无法更改。

似乎您似乎只想在下一次击中间隔时更改间隔，您可以做的是将函数从setInterval中拉出并放入其自己的引用中，而不是setInterval，只需使用setTimeout，然后按函数的最后一行只需调用setTimeout（refreshPIR，$ scope.refreshtime）

function refreshPIR() {
  if (window.deviceId != null) {
    $scope.getPIRData(window.deviceId);
  }
  setTimeout(refreshPIR, $scope.refreshtime);
}

setTimeout(refreshPIR, window.refreshtime);

您可能想添加一些错误处理以确保scope.refreshtime是一个int：-）

如何在angular js中使用ng-model将文本框值发送到控制器

2 个答案: