在同一頁上的兩個角度應用程序 - 只有一個在同一時間工作

我在頁面中有兩個角度的應用程序塊。每個人都單獨工作，但是當我嘗試只運行第一個作品時。在同一頁上的兩個角度應用程序 - 只有一個在同一時間工作

<body> 
<div ng-app='myApp' class="Freight"> 
    <div ng-controller="MainCtrl"> 
     <div> 
      <ul> 
       <li ng-repeat="prdElement in palletElement"> 
        <span> 
         <input type="text" ng-model="prdElement.name" placeholder="Name" required /> 
        </span> 

        <ul> 
         <li ng-repeat="elemnt in prdElement.product"> 
          <div class="prd-box"> 
           <span> 
            <input type="text" ng-model="elemnt.Code" placeholder=" Code" required /> 
           </span> 
           <span> 
            <input type="text" ng-model="elemnt.name" placeholder=" Description" required /> 
           </span> 
           <span> 
            <input type="text" ng-model="elemnt.class" placeholder=" Class" required /> 
           </span> 
           <span> 
            <input type="text" ng-model="elemnt.quantity" placeholder=" Quantity" required /> 
           </span> 
           <span> 
            <input type="text" ng-model="elemnt.weight" placeholder=" Weight" required /> 
           </span> 
           <span ng-hide="elemnt.length == 1"> 
            <a href="#" ng-click="prdElement.product.splice($index, 1)">Remove Item</a> 
           </span> 

          </div> 
         </li> 
         <li> 
          <a href="#" ng-click="newPrdItem(prdElement,$event)">Add Item</a> 

         </li> 
        </ul> 
        <a href="#" ng-click="newPalletItem(palletElement,$event)">Add Pallet</a> 
        <a href="#" ng-click="prdElement.splice($index, 1)">Remove Pallet</a> 
        <a href="#">Remove Pallet</a> 

       </li> 
      </ul> 
     </div> 
     <div> 
      <button ng-click="showitems($event)">Submit</button> 
     </div> 
     <div id="displayitems">{{palletElement}}</div> 
    </div> 
</div> 

<div ng-app='PackageApp' class="Freight"> 
    <div ng-controller="PackageCtrl"> 
     <div> 
      <ul> 
       <li ng-repeat="prdPackageElement in packageElement"> 
        <span> 
         <input type="text" ng-model="prdPackageElement.name" placeholder="Name" required /> 
        </span> 


       </li> 

      </ul> 
     </div> 
     <!--<div> 
      <button ng-click="showitems($event)">Submit</button> 
     </div> 
     <div id="displayitems" style="visibility:hidden;"> 
      {{prdElement}} 
     </div>--> 
    </div> 
</div>

在這種情況下，只有第一個應用程序 'MyApp的' 作品

。

詳細

Fiddle here

來源

2014-10-08 Athul

可能重複：http://stackoverflow.com/questions/12860595/how-to-define-two-angular-apps-modules-in-one-page – laruiss 2014-10-08 11:32:07

https://docs.angularjs.org/api/ng/directive/ngApp

只有一個AngularJS應用程序可以自動自舉每HTML文檔。第一ngApp發現該文檔將被用來定義根元素爲自動引導程序作爲一個應用程序。要運行一個HTML文檔中的多個應用程序必須使用angular.bootstrap代替人工引導他們。 AngularJS應用程序不能相互嵌套。

來源

2014-10-08 11:52:09 sylwester

增加：在一個頁面上使用多個角度應用是很可能不是你想要做的。如果這些「應用程序」以任何方式相關，那麼最好在一個通用應用程序模塊中使用多個控制器和視圖/路線。 – yerforkferchips 2014-10-08 11:54:58

在同一頁上的兩個角度應用程序 - 只有一個在同一時間工作

回答

相關問題