为什么我的Angular.js GET请求无法正常工作？
[英]Why isn't my Angular.js GET request working?
问题描述
My goal is to spin a servo for a certain amount of seconds on a HTML button click. 
我的目标是在单击HTML按钮时将伺服旋转一定秒数。 I am using an Arduino Yun as my microcontroller. 我正在使用Arduino Yun作为我的微控制器。
When I type in the URL directly the servo spins as it should. 当我直接输入URL时，伺服器会自动旋转。 When I click on these buttons using the Angular.js GET request nothing happens. 当我使用Angular.js GET请求单击这些按钮时，没有任何反应。 Even a regular form submit button works. 即使是常规表单提交按钮也可以使用。
Is there something missing from my code? 我的代码中缺少什么吗？
Is there an easier way to accomplish this? 有没有更简单的方法可以做到这一点？
Here is my front-end code: 这是我的前端代码：
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<script src="jquery-1.11.1.min.js"></script>
<script src="http://code.angularjs.org/1.2.6/angular.min.js"></script>
<title>winner's cat Feeder</title>
</head>
<body>
<div ng-controller="ArduinoCtrl" class="container">
<button ng-click="setServo(1)" class="btn">3 Seconds(Food)</button>
<button ng-click="setServo(2)" class="btn">9 Seconds(Food)</button>
</div>
</body>
</html>
<script type="text/javascript">
function ArduinoCtrl($scope, $http)
{
$scope.setServo = function (setting)
{
var url = "http://192.168.1.79/arduino/" + setting
$http.get(url);
}
}
</script>
If I just type in the URL in my browser with the setting value of 1 or 2 the servo works fine. 如果我只是在浏览器中输入URL的设置值1或2，则伺服器工作正常。
2 个解决方案
解决方案1
1 2014-12-11 13:40:41
You need to add the ng-app directive and add your controller to a module: 您需要添加ng-app指令并将您的控制器添加到模块中：
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<script src="jquery-1.11.1.min.js"></script>
<script src="http://code.angularjs.org/1.2.6/angular.min.js"></script>
<title>winner's cat Feeder</title>
</head>
<body ng-app="myApp">
<div ng-controller="ArduinoCtrl" class="container">
<button ng-click="setServo(1)" class="btn">3 Seconds(Food)</button>
<button ng-click="setServo(2)" class="btn">9 Seconds(Food)</button>
</div>
</body>
</html>
<script type="text/javascript">
function ArduinoCtrl($scope, $http)
{
$scope.setServo = function (setting)
{
var url = "http://192.168.1.79/arduino/" + setting
$http.get(url);
}
}
angular.module("myApp", []).controller("ArduinoCtrl", ArduinoCtrl);
</script>
解决方案2
1 已采纳 2014-12-11 13:49:47
Please see working demo 请查看工作演示
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.1.79/arduino/" + setting $http.get(url).then(sucess, error).then(function() { $scope.progress = false; }); function sucess(response) { angular.copy(response, $scope.response) } function error(response) { angular.copy(response, $scope.response) } } });
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" type="text/css" /> <div ng-app="app"> <div ng-controller="ArduinoCtrl" class="container"> <button ng-click="setServo(1)" class="btn">3 Seconds(Food)</button> <button ng-click="setServo(2)" class="btn">9 Seconds(Food)</button> <p ng-show="progress">Please wait</p> <div ng-hide="progress"> <hr/> <p>Response</p> <pre>{{response | json}}</pre> </div> </div> </div>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.