Question

我是Javascript和Angular JS编程的新手，我试图使用Yahoo Finance API制作货币转换器，但我也希望直接输入脚本中的初始值，而无需单击按钮或按Enter键，所以我认为使用Angular JS会很棒。但它没有正常工作，我认为问题可能在function calculate($scope)。拜托，你能帮帮我吗？

<html ng-app>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script>
  function httpGet(theUrl)
{
    var xmlHttp = null;
    xmlHttp = new XMLHttpRequest();
    xmlHttp.open( "GET", theUrl, false );
    xmlHttp.send( null );
    return xmlHttp.responseText;
}
function currencyConverter(currency_from,currency_to,currency_input){
var yql_base_url = "https://query.yahooapis.com/v1/public/yql";
var yql_query = 'select%20*%20from%20yahoo.finance.xchange%20where%20pair%20in%20("'+currency_from+currency_to+'")';
var yql_query_url = yql_base_url + "?q=" + yql_query + "&format=json&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys";
var http_response = httpGet(yql_query_url);
var http_response_json = JSON.parse(http_response);

return http_response_json.query.results.rate.Rate;
}

//The problem starts here?

function calculate($scope)
{
  $scope.total= function(){
var currency_from = "USD";
var currency_to = "INR";
var rate = currencyConverter(currency_from,currency_to,$scope.currency_input);
return rate;
};
}
  </script>
  <script src="js/angular.js"></script>
</head>
<body>
        <div ng-controller="calculate">
        <div style="float:left;">
        <form>
          <input type="text" ng-model="currency_input" value="0"/> = &nbsp;
        </form>
        </div>
        <div style="float:left">
        {{total()}}
      </div>
      </div>
        <div style="clear: both;"></div>

</body>
</html>

Answer 1

一个问题应该是第一个要纠正并从那里开始的问题，就是在实际声明角度库之前，你在脚本中引用一个角度概念$scope。

要更正此问题，请将角度库脚本标记移到其他脚本标记上方（但在jquery脚本标记下方。

Answer 2

您应该查看服务（https://docs.angularjs.org/guide/services）。

有了这个，你就可以创建一个服务，并把你所有的雅虎＆＃39;相关功能在一个地方。然后将其注入指令/控制器。

例如：

    .service('yahooRelatedLogicSrvc', function () {
      return {
          httpGet: function httpGet(theUrl) {
           var xmlHttp = null;
           xmlHttp = new XMLHttpRequest();
           xmlHttp.open( "GET", theUrl, false );
           xmlHttp.send( null );
           return xmlHttp.responseText;
        }
      }
    })
  .controller('sampleCtrl', function ($scope, yahooRelatedLogicSrvc) {
    var url = 'http://yahoo.com';

    $scope.httpGet = yahooRelatedLogicStvc.httpGet(url);
  }

您可以将服务函数的返回值作为$ scope属性等。我真的可以理解为什么你应该在那个场景中使用在线javascript。

Answer 3

使用AngularJS的代码中有一些错误。您忘记启动应用程序模块并添加控制器。

我做了一些修改，我测试了，它正在运行：

<html ng-app="app">
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
</head>
<body>
        <div ng-controller="MyController">
        <div style="float:left;">
        <form>
          <input type="text" ng-model="currency_input" ng-change="total()" value="0"/> = &nbsp;
        </form>
        </div>
        <div style="float:left">
          {{ rate }}
        </div>
      </div>
        <div style="clear: both;"></div>

  <script>
  angular.module('app', [])
  .controller('MyController', function($scope, $http) {

    function currencyConverter(currency_from,currency_to) {
      var yql_base_url = "https://query.yahooapis.com/v1/public/yql";
      var yql_query = 'select%20*%20from%20yahoo.finance.xchange%20where%20pair%20in%20("'+currency_from+currency_to+'")';
      var yql_query_url = yql_base_url + "?q=" + yql_query + "&format=json&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys";
      $http.get(yql_query_url).then(function(response) {
        $scope.rate = $scope.currency_input*response.data.query.results.rate.Rate;
      });
    }

      $scope.total = function() {
      var currency_from = "USD";
      var currency_to = "INR";
      currencyConverter(currency_from, currency_to);
    };
  });
  </script>
</body>
</html>

我建议您不要使用jquery进行http调用。使用$ http代替！

Answer 4

Angular使这样的事情比你尝试的更容易。有一个用于执行GET的$ http服务，所以你可以省略jquery并在我的例子中创建更简单的东西，如ConverterService。

由于您的输入绑定到范围变量，因此您无需设置value="0"，只需将$scope.currency_input设置为控制器中的默认值即可。我在作用域上创建了一个convert函数，它会在调用时更新输出。它在控制器的底部调用一次，但可以通过简单地执行以下操作绑定到html中的按钮：<button ng-click="convert()">Convert value</button>

var app = angular.module('calc', []);

app.controller('MainCtrl', function($scope, ConverterService) {
  // default your currency input
  $scope.currency_input = 10;

  var currency_from = "USD";
  var currency_to = "INR";
  
  $scope.convert = function() {
    ConverterService.getConversions(currency_from, currency_to)
    .then(function(response) {
        // put your logic to convert the value here
        var convertedVal = null; // = $scope.currency_input * response.something etc...
    
        $scope.result = convertedVal;
    });
  };
  
  $scope.convert();// run once when the controller loads to get defaulted input conversion
});

app.factory('ConverterService', function($http) {
  return {
    getConversions: function(from, to, val) {
      var endpoint = ''; // build your endpoint here

      return $http.get(endpoint);
    }
  };
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<html ng-app="calc">
<div ng-controller="MainCtrl">
  <input type="text" ng-model="currency_input">= {{result}}
</div>

</html>

Angular JS和Javascript的一些问题

4 个答案: