【AnjularJS系列4】单个页面加载多个ng-App
第四篇，插播， 单个页面加载多个ng-App
在写范例的时候发现的问题
一个页面有多个ng-app，angular只会处理第一个ng-app
需要加载两个ng-app，需要进行手动加载：
angular.bootstrap(document.getElementById("myBind"), ["myBind"]);
angular.bootstrap(document.getElementById("mysimpleBind"), ["mysimpleBind"]);
注：必须给ng-app的元素进行Id赋值，才能进行手动加载。
以下为完整代码：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title></title> 5 <script src="js/angular.min.js"></script> 6 <style type="text/css"> 7 8 </style> 9 </head> 10 <body> 11 <div id="mysimpleBind" ng-app="mysimpleBind" ng-controller="MySimplectrl"> 12 <div> 13 <label>Name:</label> 14 <input type="text" ng-model="name" placeholder="请输入姓名" name=""> 15 </div> 16 <div> 17 <label>问候语：</label> 18 <label>Hello,{{name}}</label> 19 </div> 20 </div> 21 2、双向绑定 22 <div id="myBind" ng-app="myBind" ng-controller="MyBindctrl"> 23 <div> 24 <label>昵称:</label> 25 <input type="text" ng-model="user.name" placeholder="请输入姓名"> 26 <input type="button" value="获取年龄" ng-click="GetAge();"> 27 </div> 28 <div> 29 <label>年龄：</label> 30 <label> {{user.agetext}}</label> 31 </div> 32 </div> 33 </body> 34 <script type="text/javascript"> 35 var myModule = angular.module('myBind', []); 36 myModule.controller("MyBindctrl",function($http,$scope){ 37 var nameInfo= [{name:"张立伟",age:20},{name:"闵志涛",age:21},{name:"杨一凡",age:22},{name:"黄征",age:29}]; 38 $scope.GetAge=function(){ 39 var _bl=false; 40 for(var i=0;i<nameInfo.length;i++) 41 { 42 if (nameInfo[i].name==$scope.user.name) { 43 44 $scope.user.agetext= $scope.user.name+"今年"+nameInfo[i].age+"岁了"; 45 _bl=true; 46 break; 47 } 48 } 49 if (!_bl) { 50 $scope.user.agetext= "找不到记录"; 51 } 52 }; 53 }); 54 var myModule1 = angular.module('mysimpleBind', []); 55 myModule1.controller("MySimplectrl",function($http,$scope){ 56 }); 57 58 angular.bootstrap(document.getElementById("myBind"), ["myBind"]); 59 angular.bootstrap(document.getElementById("mysimpleBind"), ["mysimpleBind"]); 60 61 </script> 62 </html>
