Angular JS和Javascript的一些問題
[英]Some problems with Angular JS and Javascript
問題描述
我是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"/> =
</form>
</div>
<div style="float:left">
{{total()}}
</div>
</div>
<div style="clear: both;"></div>
</body>
</html>
4 個解決方案
解決方案1
1 2016-02-18 19:24:38
一個應該首先糾正並從那里開始的問題是，在實際聲明角度庫之前，您在腳本中引用了角度概念$scope 。
要解決此問題，請將您的角度庫腳本標簽向上移動到其他腳本標簽上方（但在jquery腳本標簽下方）。
解決方案2
1 2016-02-18 19:35:41
您應該看一下服務（ https://docs.angularjs.org/guide/services ）。
這樣，您就可以創建一項服務，並將所有與“ Yahoo”相關的功能放在一個地方。 然后將其注入您的指令/控制器中。
例如：
.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中使用。
解決方案3
1 已采納 2016-02-18 19:46:59
使用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"/> =
</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！
解決方案4
1 2016-02-18 20:19:41
Angular使類似這樣的事情比您嘗試的要容易得多。 有一個用於執行GET的$ http服務，因此在我的示例中，您可以省去jquery並創建更簡單的東西（如ConverterService 。
由於您的輸入綁定到范圍變量，因此您無需將value="0"設置$scope.currency_input簡單的$scope.currency_input為您的控制器中的默認值。 我在示波器上創建了一個convert函數，它將在調用輸出時更新輸出。 它在控制器底部被調用一次，但是可以通過簡單地執行以下操作將其綁定到html中的<button ng-click="convert()">Convert value</button> ： <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中DI的一些問題
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.