Question

我的目标是在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，伺服就可以正常工作。

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

Answer 2

请参阅工作演示

＆＃13;

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)


    }
  }


});

＆＃13;

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

＆＃13;

为什么我的Angular.js GET请求无效？

2 个答案: