簡體   English   中英

同一頁上有兩個角度應用程序-一次只能工作一個

[英]Two angular app on same page - only one works at a time

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

<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”有效。

詳細

在這里擺弄

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

每個HTML文檔只能自動引導一個AngularJS應用程序。 在文檔中找到的第一個ngApp將用於定義根元素以作為應用程序自動引導。 要在HTML文檔中運行多個應用程序,您必須使用angular.bootstrap手動引導它們。 AngularJS應用程序不能相互嵌套。

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM