0

我的目标是在单击 HTML 按钮时使伺服旋转几秒钟。我使用 Arduino Yun 作为我的微控制器。

当我直接输入 URL 时，伺服系统会正常旋转。当我使用 Angular.js GET 请求单击这些按钮时，没有任何反应。即使是常规的表单提交按钮也可以工作。

我的代码中是否缺少某些内容？

有没有更简单的方法来实现这一点？

这是我的前端代码：

<!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>

如果我只是在浏览器中输入设置值为 1 或 2 的 URL，则伺服工作正常。

4

2 回答 2

1

请看工作演示

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>

于 2014-12-11T13:49:47.073 回答
1

您需要添加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>
于 2014-12-11T13:40:41.723 回答