当我尝试添加第二个时，角度计算器将不起作用，但两者都可以单独工作

Question

我有两个计算器，我正在尝试使用角度创建。两个计算器完全按照我需要的单独工作，但是当组合在一起时，一个总是会中断。我在这里错过了什么吗？

(如果您删除第一个版本，第二个版本工作正常，但是当合并时，第二个版本总是会中断(

计算演示：https://codepen.io/aeveritt84/pen/pKPxEP

//======================First==========================
(function() {
var myApp = angular.module("myApp", []);
myApp.controller("myController", ["$scope", myController]);
var events = [
{
name: "Adults",
cost: 485,
itemTotal: 0
},
{
name: "Kids 13-18",
cost: 394,
itemTotal: 0
},
{
name: "Kids 4-12",
cost: 307,
itemTotal: 0
},
{
name: "Kids 0-3",
cost: 100,
itemTotal: 0
}
];
function myController($scope) {
$scope.events = events;
$scope.quantity = 0; 
$scope.recalc = function(item, quantity ) {
item.itemTotal = quantity * item.cost;
$scope.GrandTotal = 0;
var sum = 0;
angular.forEach($scope.events, function(event){
$scope.GrandTotal = $scope.GrandTotal + event.itemTotal;
$scope.GrandTotal == NaN ? "custom msg": $scope.GrandTotal;
// console.log($scope.GrandTotal);
})
};
}
})();
//===================End First=====================
//=====================Second=======================
(function() {
var myAppTwo = angular.module("myAppTwo", []);
myAppTwo.controller("myControllerTwo", ["$scope", myControllerTwo]);
var eventsTwo = [
{
nameTwo: "Adults",
costTwo: 485,
itemTotalTwo: 0
},
{
nameTwo: "Kids 13-18",
costTwo: 394,
itemTotalTwo: 0
},
{
nameTwo: "Kids 4-12",
costTwo: 307,
itemTotalTwo: 0
},
{
nameTwo: "Kids 0-3",
costTwo: 100,
itemTotalTwo: 0
}
];
function myControllerTwo($scope) {
$scope.eventsTwo = eventsTwo;
$scope.quantityTwo = 0; 
$scope.recalcTwo = function(item, quantityTwo ) {
item.itemTotalTwo = quantityTwo * item.costTwo;
$scope.GrandTotalTwo = 0;
var sumTwo = 0;
angular.forEach($scope.eventsTwo, function(eventTwo){
$scope.GrandTotalTwo = $scope.GrandTotalTwo + eventTwo.itemTotalTwo;
$scope.GrandTotalTwo == NaN ? "custom msg": $scope.GrandTotalTwo;
// console.log($scope.GrandTotal);
})
};
}
})();
//======================End Second=======================

Answer 1

您不能在同一页面中使用两次ng-app。如果你想要 多个ng-app，您必须手动引导其中一个，如下所示：

注意：手动引导应用时不应使用 ng-app 指令。

无论自动引导还是手动引导，都有几点需要记住：

虽然可以在每页引导多个 AngularJS 应用程序，但我们不会针对这种情况进行主动测试。您可能会遇到问题，尤其是对于复杂的应用程序，因此建议谨慎。

不要在具有使用嵌入的指令的元素上引导应用，例如 ngIf、ngInclude 和 ngView。这样做会错误放置应用$rootElement和应用的注入器，从而导致动画停止工作，并使注入器无法从应用外部访问。

angular.module('myApp2', [])
.controller('MyController2', ['$scope', function ($scope) {
$scope.greetMe = 'World';
}]);
angular.element(function() {
angular.bootstrap(document.querySelector(".my-app-2"), ['myApp2']);
});