I am using angular.js for my GET request.
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;
});
}
});
I would like to call the setServo(setting) GET request when a time (two ints), in hours and minutes that is set by the user, matches the current time. The user inputted time is set with two range input types.
HTML code:
<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>
My JavaScript code, this is called onload in the .
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);
}
}
First of all, I can't understand why you're not binding inputs using regular ng-model approach:
<!-- Example: -->
<input type="text" ng-model="hour" />
Once you've bound an input to some scope's property using ng-model, the so-called input and property will react to changes of both (this is two-way binding).
In the other hand, you'll implement a hour and minute properties in your controller's $scope, and you won't access the DOM to get inputs' values, since Angular data-binding will set input values into these properties and viceversa when you set the properties.
If you go this way, you can $watch property changes and once hours and minutes are current time, you can trigger a function:
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);
});
Let me give you an advise: AngularJS is about data-binding, separation of concerns and controllers, models or services shouldn't access the DOM directly - this is why data-binding exists -. Directives are the entity whithin Angular world that may access or modify the DOM using regular DOM or jQuery (or any other DOM manipulation library).
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다