AngularJS ng-app第二次不起作用

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

通常你不需要两个"ng-app"。尝试将第二部分放入第一部分。 你的代码应该是这样的：

<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>

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