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，则必须manually bootstrap其中一个，例如：

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

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

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

不要在具有使用转换的指令的元素上引导您的应用，例如ngIf，ngInclude和ngView。这样做会错误地放置app $ rootElement和应用程序的注入器，导致动画停止工作并使应用程序无法从应用程序外部进入。

angular.module('myApp2', [])
.controller('MyController2', ['$scope', function ($scope) {
  $scope.greetMe = 'World';
}]);

angular.element(function() {
  angular.bootstrap(document.querySelector(".my-app-2"), ['myApp2']);
});

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

1 个答案: