解決angular單個頁面只能載入一個ng-app的問題
阿新 • • 發佈：2019-02-04
問題重現：
<!Doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style></style>
<script src="js/jquery.min.js"></script>
<script src ="js/angular.js"></script>
<script 執行後只會輸出：
Hello angular
解決辦法：
使用angular.bootstrap手動將第二個ng-app加入控制：
在，js程式碼最後加上一句：
angular.bootstrap($("dir"),['dir']);當然，在第二個ng-app接管的div上要加一個id屬性dir並且去掉第二個ng-app。
所以最終兩個ng-app能同時存在於一個頁面的完整示例程式碼是：
<!Doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style></style>
<script src="js/jquery.min.js"></script>
<script src ="js/angular.js"></script>
</head>
<body >
<div ng-app="myapp">
<hello></hello>
</div>
<div id="dir" >
<dir></dir>
</div>
<script >
var app = angular.module("myapp",[]);
app.directive("hello",function(){
return {
restrict:"E",
template:'<h1>Hello angular</h1>',
replace:true
}
});
var app2 = angular.module("dir",[]).run(function($templateCache){
$templateCache.put("header.html","<h2>use templateCache</h2>");
});
app2.directive("dir",function($templateCache){return {
restrict:"E",
template:$templateCache.get("header.html"),
replace:true
}});
angular.bootstrap($("dir"),['dir']);
</script>
</body>
</html>對於angular.bootstrap的一點探討：
1.使用ng-app，頁面載入時會這樣處理：
- angular找到ng-app標記後，首先載入與module相關的directive
- 建立應用相關的injector（依賴管理器）
- 開始對ng-app為根節點的DOM“編譯”
2、angular.bootstrap方法可以理解為省去查詢ng-app的過程，傳給bootstrap的引數一個為DOM物件，另一個為模組名陣列。