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

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 に答える
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 に答える