[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並不會被執行

image



解決方法


透過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

這個網誌中的熱門文章

[TFS] 分支與合併

[.NET Core] 將專案發行至IIS