[AngularJS] 多個app在同一個網頁

在同一個網頁內若設定多個module，在預設情況下只會執行第一個設定ng-app的內容，第二個ng-app設定則不會執行，如下方的View內容

<div ng-app="app1" class="panel panel-primary">
    <div class="panel-heading">Directive-Static Template</div>
    <div ng-controller="myCtrl" class="panel-body">
        Name:{{customer.name}} Address:{{customer.address}}
    </div>
</div>

<div id="app2" ng-app="restrictApp" class="panel panel-info">
    <div class="panel-heading">Directive-Restrict</div>
    <div ng-controller="myCtrl" class="panel-body">
       Name:{{customer.name}} Address:{{customer.address}}
    </div>
</div>

app2的angularJs並不會被執行

解決方法

透過angular.bootstrap()，將第二個module挷定特定的Element，如下方完整程式，第一個參數為Element，第二個module名稱

See the Pen multiple app in single view by kimxinfo (@kimxinfo) on CodePen.

 

參考來源

http://stackoverflow.com/questions/18571301/angularjs-multiple-ng-app-within-a-page