AngularJS在頁面上多次使用相同的ng-app

Question

我正在處理一個內容管理系統，該系統需要將可重用組件“注入”頁面。

我想注入以下組件（html和javascript）。

<script type="text/javascript">
if(typeof angular == 'undefined') {
   document.write(unescape("%3Cscript type='text/javascript' src='/resources/scripts/lib/angular.min.js'%3E%3C/script%3E"));
   document.write(unescape("%3Cscript type='text/javascript' src='/resources/scripts/pricing/app.js'%3E%3C/script%3E"));     }    
}
  </script>           
<div ng-app="pricing" ng-controller="PriceController as pc" ng-init="pc.getPrices('myprod', 'PER')">
 Some text {{ pc.prices.msg["startdat tarief"] | jsDate }} . 
 More text {{ pc.prices.msg["einddat product"] | jsDate }}.

</div>   

該組件必須能夠在頁面上多次注入。

問題在於控制器工作正常，但僅適用於第一次進樣。

這可能與我多次使用同一個應用程序有關。

我對棱角還很陌生。

如何多次注入相同的組分？

請注意，我無法在更高級別上初始化應用程序。 因為這將需要內容管理器來編輯所有頁面，所以我們想注入一個帶有javascript（即代碼段）的HTML組件。

Answer 1

單個頁面上不能有多個ng-App指令。 從Angular.js 文檔中 ：

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

如果不能將ng-App放在樹中較高的位置，則必須重新編寫組件，以便每個組件都具有唯一的angular.module()並且在注入組件時，它將需要觸發angular.bootstrap() 。

Answer 2

如果您能夠向模塊div添加唯一ID，則可以按以下步驟手動引導角度應用程序：

 function bootstrapAngular(id) { angular.bootstrap(document.getElementById('module-' + id), ['app']); } angular.module('app', []).controller('sample', function ($scope) { $scope.foo = 'bar'; }); bootstrapAngular(1); bootstrapAngular(2); bootstrapAngular(3); 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div id="module-1"> <div ng-controller="sample"> {{ foo }} </div> </div> <div id="module-2"> <div ng-controller="sample"> {{ foo }} </div> </div> <div id="module-3"> <div ng-controller="sample"> {{ foo }} </div> </div>