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赋值，才能进行手动加载。

以下为完整代码：

<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="js/angular.min.js"></script>
<style type="text/css"> </style>
</head>
<body>
<div id="mysimpleBind" ng-app="mysimpleBind" ng-controller="MySimplectrl">
<div>
<label>Name:</label>
<input type="text" ng-model="name" placeholder="请输入姓名" name="">
</div>
<div>
<label>问候语：</label>
<label>Hello,{{name}}</label>
</div>
</div>
2、双向绑定
<div id="myBind" ng-app="myBind" ng-controller="MyBindctrl">
<div>
<label>昵称:</label>
<input type="text" ng-model="user.name" placeholder="请输入姓名">
<input type="button" value="获取年龄" ng-click="GetAge();">
</div>
<div>
<label>年龄：</label>
<label> {{user.agetext}}</label>
</div>
</div>
</body>
<script type="text/javascript">
var myModule = angular.module('myBind', []);
myModule.controller("MyBindctrl",function($http,$scope){
var nameInfo= [{name:"张立伟",age:20},{name:"闵志涛",age:21},{name:"杨一凡",age:22},{name:"黄征",age:29}];
$scope.GetAge=function(){
var _bl=false;
for(var i=0;i<nameInfo.length;i++)
{
if (nameInfo[i].name==$scope.user.name) { $scope.user.agetext= $scope.user.name+"今年"+nameInfo[i].age+"岁了";
_bl=true;
break;
}
}
if (!_bl) {
$scope.user.agetext= "找不到记录";
}
};
});
var myModule1 = angular.module('mysimpleBind', []);
myModule1.controller("MySimplectrl",function($http,$scope){
}); angular.bootstrap(document.getElementById("myBind"), ["myBind"]);
angular.bootstrap(document.getElementById("mysimpleBind"), ["mysimpleBind"]); </script>
</html>