AngularJS 中啟動多個 ng-app 的問題

標籤：

最近正在學習 AngularJS，在編寫一個小 Demo 程式時遇到一個問題，就是當在單個頁面上載入了多個 ng-app 時，只有第一個會起作用。

查詢後找到答案：在 angular 頁面中，每一個 HTML 頁面只有一個 ng-app 會被自動裝載。

所以我們有幾種方案來解決這個問題。

　　1. 可以簡單的將多個 ng-app 合并成為一個根模組。

　　2. 可以手動裝載除了第一個以外的多個 ng-app。

 

ng-app 是 angular 中的一個十分重要的標籤。一個 ng-app 應當對應一塊商務邏輯，所以一個頁面是可能需要使用多個模組的。為了避免不同模組間代碼的耦合，我個人更偏向於第二種做法。代碼如下：

    <div id="app1div" ng-app="myApp1" ng-controller="personCtrl">        <p>personCtrl</p>        First name: <input type="text" ng-model="firstName"><br>        Last Name: <input type="text" ng-model="lastName"><br>        Full Name: {{fullName()}}    </div>    <br><br>    <div id="app2div" ng-app="myApp2" ng-controller="personCtrl">        <p>personCtrl</p>        First name: <input type="text" ng-model="firstName"><br>        Last Name: <input type="text" ng-model="lastName"><br>        Full Name: {{fullName()}}    </div>    <script>        var app1 = angular.module(‘myApp1‘, []);        var app2 = angular.module(‘myApp2‘, []);        app1.controller(‘personCtrl‘, function($scope){            $scope.firstName = ‘Aaron‘;            $scope.lastName = ‘S‘;            $scope.fullName = function(){ return $scope.firstName + $scope.lastName; }        });        app2.controller(‘personCtrl‘, function($scope){            $scope.firstName = ‘Andy‘;            $scope.lastName = ‘W‘;            $scope.fullName = function(){ return $scope.firstName + $scope.lastName; }        });        angular.bootstrap(document.getElementById("app2div"), [‘myApp2‘]);    </script>

 

AngularJS 中啟動多個 ng-app 的問題