Question

我正在尝试使用Angular JS创建一个基本的标签程序。这是我的第一个角度程序。所以我无法弄清楚为什么以下代码无效。

<div ng-app="invoice1" 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><br>
        <button class="btn" ng-click="invoice.pay()">Pay</button>
    </div>
</div>
<div ng-app ng-init="qty=1;cost=2">
    <b>Invoice:</b>
    <div>
        Quantity: <input type="number" min="0" ng-model="qty">
    </div>
    <div>
        Costs: <input type="number" min="0" ng-model="cost">
    </div>
    <div>
        <b>Total:&#8377;</b> {{qty * cost}}
    </div>
</div>
<script src="js/angular.js"></script>
<script src="js/convert.js"></script>

第一部分如果代码工作正常，但第二部分没有，但是如果我切换div结构位置，那么第一部分再次工作，第二部分没有，意味着我有一个愚蠢的错误无法找到答案。请让我知道我的错。

Answer 1

一般来说，你不需要两个＆＃34; ng-app＆＃34;。尝试将第二部分放入第一部分。你的代码应该是这样的：

＆＃13;

<div ng-app="invoice1" 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><br>
    <button class="btn" ng-click="invoice.pay()">Pay</button>
  </div>
  <div ng-init="qty=1;cost=2">
    <b>Invoice:</b>
    <div>
      Quantity: <input type="number" min="0" ng-model="qty">
    </div>
    <div>
      Costs: <input type="number" min="0" ng-model="cost">
    </div>
    <div>
      <b>Total:&#8377;</b> {{qty * cost}}
    </div>
  </div>
</div>

<script src="js/angular.js"></script>
<script src="js/convert.js"></script>

＆＃13;

Answer 2

默认情况下，只初始化第一个应用程序，如果要使用其他应用程序，则必须强制引导它。虽然这不是好习惯

类似

angular.element(document).ready(function() {
   angular.bootstrap(dvFirst, ['firstApp']);
   angular.bootstrap(dvSecond, ['secondApp']);
});

https://www.codeproject.com/Articles/862602/Define-multiple-Angular-apps-in-one-page

AngularJS ng-app第二次没有工作

2 个答案: