Question

我正试图在Angular官方网站上执行此example。但是，我不知道为什么在这部分代码中第一个函数不起作用，而第二个函数＃34; pay（）＆＃34;效果很好：

     <div>
      <b>Total:</b>
      <span ng-repeat="c in invoice.currencies">
         {{ invoice.total(c) | currency:c}}
      </span>
      <button class="btn" ng-click="invoice.pay()">Pay</button>
     </div>

这是我的完整代码：

的index.html

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example - example-guide-concepts-3-production</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.0-beta.6/angular.min.js"></script>
<script src="invoice3.js"></script>
<script src="finance3.js"></script>
</head>
<body >
<div ng-app="invoice3" ng-controller="InvoiceController as invoice">
<b>Invoice:</b>
<div>
Quantity: <input type="number" min="0" ng-model="invoice.qty" required >
</div>
<div>
Costs: <input type="number" min="0" ng-model="invoice.cost" required >
<select ng-model="invoice.inCurr">
  <option ng-repeat="c in invoice.currencies">{{c}}</option>
</select>
</div>
<div>
<b>Total:</b>
<span ng-repeat="c in invoice.currencies">
  {{ invoice.total(c) | currency:c}}
</span>
<button class="btn" ng-click="invoice.pay()">Pay</button>
</div>
</div>
</body>
</html>

invoice3.js：

(function(angular) {
'use strict';
 angular.module('invoice3', ['finance3'])
 .controller('InvoiceController', ['currencyConverter',      function(currencyConverter) {
  this.qty = 1;
  this.cost = 2;
  this.inCurr = 'EUR';
  this.currencies = currencyConverter.currencies;

  this.total = function total(outCurr) {
  return currencyConverter.convert(this.qty * this.cost, this.inCurr, outCurr);
  };
  this.pay = function pay() {
  window.alert("Thanks!");
  };
  }]);
  })(window.angular);

finance3.js：

  (function(angular) {
  'use strict';
  angular.module('finance3', [])
  .factory('currencyConverter', ['$http', function($http) {
  var YAHOO_FINANCE_URL_PATTERN =
      '//query.yahooapis.com/v1/public/yql?q=select * from '+
      'yahoo.finance.xchange where pair in ("PAIRS")&format=json&'+
      'env=store://datatables.org/alltableswithkeys&callback=JSON_CALLBACK';
  var currencies = ['USD', 'EUR', 'CNY'];
  var usdToForeignRates = {};

  var convert = function (amount, inCurr, outCurr) {
  return amount * usdToForeignRates[outCurr] / usdToForeignRates[inCurr];
  };

  var refresh = function() {
  var url = YAHOO_FINANCE_URL_PATTERN.
             replace('PAIRS', 'USD' + currencies.join('","USD'));
  return $http.jsonp(url).success(function(data) {
    var newUsdToForeignRates = {};
    angular.forEach(data.query.results.rate, function(rate) {
      var currency = rate.id.substring(3,6);
      newUsdToForeignRates[currency] = window.parseFloat(rate.Rate);
    });
    usdToForeignRates = newUsdToForeignRates;
  });
  };

  refresh();

  return {
  currencies: currencies,
  convert: convert,
  refresh: refresh
  };
  }]);
  })(window.angular);

这是demo在Plunker中有效，但不在我的电脑上！这是我电脑上的结果：

result

提前谢谢！

Answer 1

我已经使用您的代码进行了演示，但它确实有效。

<div>
  <b>Total:</b>
  <span ng-repeat="c in invoice.currencies">
     {{ invoice.total(c) | currency:c}}
  </span>
  <button class="btn" ng-click="invoice.pay()">Pay</button>
 </div>

你可以在这里查看： http://plnkr.co/edit/Uw5DlVpdTJYFPJ0I7jjB?p=preview

无法使用ng-repeat中的参数调用控制器函数 - AngularJS

1 个答案: