javascript - 当用户输入等于当前时间时，如何执行 GET 请求？

Question

我正在使用 angular.js 来处理我的 GET 请求。

var app = angular.module('app', []);

app.controller('ArduinoCtrl', function ($scope, $http) {
    $scope.response = {};
    $scope.progress = false;
    $scope.setServo = function (setting) {
        $scope.progress = true;
        var url = "http://192.168.2.4/arduino/" + setting
        $http.get(url).then(sucess, error).then(function () {
            $scope.progress = false;
        });

    }


});

当用户设置的时间(两个整数)(以小时和分钟为单位)与当前时间匹配时，我想调用 setServo(setting) GET 请求。用户输入的时间有两种范围输入类型。

HTML 代码:

<div class="jumbotron">
            <h2>Enter the time for daily dispense</h2>
            <input type="number" min="1" max="3" id="num"/>
            <div>
                <p>Hour: </p>
                <input type="range" min="1" max="24" name="hour" id="hour" onchange="updatedHourInput(this.value)" />

            </div>
            <div>
                <p>Minutes: </p>
                <input type="range" min="00" max="55" step="5" name="minute" id="minute" onchange="updateTextInput(this.value)" />
            </div>
            <div>
                <span>Entered Time=  </span><span id="textHour"></span><span>:</span><span id="textMinute"></span>
                <br />
                <span>Current Time= </span><span id="time"></span>
            </div>
        </div>

我的JavaScript代码，这在.

中称为onload

 function startTime() {
    var today=new Date();
    var h=today.getHours();
    var m=today.getMinutes();
    var s=today.getSeconds();
    m = checkTime(m);
    s = checkTime(s);
    document.getElementById('time').innerHTML = h + ":" + m + ":" + s;
    var userHour = parseInt(document.getElementById('hour').innerHTML);
    var userMinute = parseInt(document.getElementById('minute').innerHTML);
    var num = parseInt(document.getElementById('num').value);
    var t = setTimeout(function(){startTime()},500);
    if ((h == userHour) && (m = userMinute)) {
        setServo(num);


    }
}

Answer 1

首先，我不明白为什么您不使用常规 ng-model 方法绑定(bind)输入:

<!-- Example: -->
<input type="text" ng-model="hour" />

一旦您使用 ng-model 将输入绑定(bind)到某个作用域的属性，所谓的输入和属性将对两者的更改使用react(这是双向绑定(bind))。

另一方面，您将在 Controller 的 $scope 中实现 小时 和 分钟 属性，并且您将无法访问DOM 来获取输入的值，因为 Angular 数据绑定(bind)会将输入值设置到这些属性中，并且当您设置属性时反之亦然。

如果你这样做，你可以$watch属性更改，一旦小时和分钟是当前时间，你就可以触发一个函数:

module.controller("X", ["$scope", function($scope) {
    $scope.hours = 0;
    $scope.minutes = 0;

    var onTimeChange = function() {
        // Eval $scope.hours and $scope.minutes
        // and trigger whatever function you want!
    }; 

    $scope.$watch("hours", onTimeChange);
    $scope.$watch("minutes", onTimeChange);
});

让我给你一个建议:AngularJS 是关于数据绑定(bind)、关注点分离和 Controller 、模型或服务不应该直接访问 DOM - 这就是数据绑定(bind)存在的原因 -。指令是 Angular 世界中的实体，可以使用常规 DOM 或 jQuery(或任何其他 DOM 操作库)访问或修改 DOM。