Question

我刚刚开始使用angular.js并且正在阅读教程，直到我遇到一个凹凸。我正在制作一个简单的应用程序，它接收2个输入并显示这两个值的乘积（使用visual studio 2010）。当我不使用像这样的单独的控制器时它很好用

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="scripts/jquery-1.3.2.min.js" type="text/javascript"></script>
    <script src="scripts/angular.min.js" type="text/javascript"></script>
</head>
<body data-ng-app>
    <form id="form1" runat="server" >
        <table data-ng-init="quant=1;price=2;curr=['e','u','r'];">
            <tr>
            <td>Quantity:</td>
            <td><input type="number" ID="text_quantity" data-ng-model="quant" />
            </tr>
            <tr>
            <td>Price:</td>
            <td><input type="number" ID="text_price" data-ng-model="price" />
            </tr>
            <tr>
            <td>Total:</td>
            <td>{{quant*price | currency}}</td>
           </tr>
     </table>
     <span ng-repeat="c in curr" ng-bind="c"></span>
   </form>
</body>
</html>

但是当我尝试使用控制器时，绑定表达式“{{quant * price | currency}}”停止工作，而不是2个值的乘积表达式本身，即“{{quant * price | currency}}”出现在这页纸。下面是为单独的控制器编写的代码：

HTML：

<html ng-app="invoice1">
<head>
<script src="http://code.angularjs.org/1.2.1/angular.min.js"></script>
<script src="scripts/invoice1.js"></script>
</head>
<body>
<div ng-controller="InvoiceController as invoice">
  <b>Invoice:</b>
  <div>
    Quantity: <input type="number" ng-model="invoice.qty" required >
  </div>
  <div>
    Costs: <input type="number" 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>

控制器（Invoice1.js）：

angular.module('invoice1', [])
.controller('InvoiceController', function() {
this.qty = 1;
this.cost = 2;
this.inCurr = 'EUR';
this.currencies = ['USD', 'EUR', 'CNY'];
this.usdToForeignRates = {
  USD: 1,
  EUR: 0.74,
  CNY: 6.09
};

this.total = function total(outCurr) {
  return this.convertCurrency(this.qty * this.cost, this.inCurr, outCurr);
};
this.convertCurrency = function convertCurrency(amount, inCurr, outCurr) {
  return amount * this.usdToForeignRates[outCurr] * 1 / this.usdToForeignRates[inCurr];
};
this.pay = function pay() {
  window.alert("Thanks!");
};
});

请在这方面提供帮助。

使用单独的控制器时绑定不起作用

0 个答案: