- AngularJS入门与进阶
- 江荣波
- 505字
- 2020-11-28 23:44:31
3.4 控制器的作用域范围
前面我们了解到使用ng-controller指令实例化控制器时会产生一个新的作用域对象，而且同一个页面中可以使用多个ng-controller指令来实例化不同的控制器对象。但是需要注意的是，每个控制器对应的作用域对象只能与ng-controller指令所在标签的开始标签与结束标签之间的DOM元素建立数据绑定。为了证明这个观点，我们不妨看一下下面的案例。
代码清单：ch03\ch03_02.html
<!doctype html>
<html ng-app="app">
<head>
<meta charset="UTF-8">
<title>ch03_02</title>
<script type="text/javascript" src="../angular-1.5.5/angular.js">
</script>
</head>
<body>
<div ng-controller="UserController" style="border:#ccc solid 1px; ">
用户名：<input type="text" ng-model="name" placeholder="用户名"/>
密码：<input type="password" ng-model="pword" placeholder="密码"/>
<button>提交</button>
<p>您输入的用户名：{{name}}</p>
<p>您输入的密码：{{pword}}</p>
</div>
<br/>
<div ng-controller="InfoContoller" style="border:#ccc solid 1px; ">
个人爱好：<input type="text" ng-model="love" placeholder="个人爱好"/>
<p>您输入的个人爱好：{{love}}</p>
</div>
<script>
function UserController（$scope, $log）{
$scope.name="admin";
$scope.pword="123456";
$log.info（"UserController->name:" +$scope.name）;
$log.info（"UserController->pword:" + $scope.pword）;
}
function InfoContoller（$scope, $log）{
$scope.love="足球";
$log.info（"InfoContoller->name:" + $scope.name）;
$log.info（"InfoContoller->pword:" + $scope.pword）;
$log.info（"InfoContoller->love:" + $scope.love）;
}
var app = angular.module（"app", []）;
app.controller（"UserController", UserController）;
app.controller（"InfoContoller", InfoContoller）;
</script>
</body>
</body>
</html>
在浏览器中运行ch03_02.html，打开开发人员工具，效果如图3.2所示。
图3.2 控制器作用域范围演示案例
控制台输出内容如下：
UserController->name:admin
UserController->pword:123456
InfoContoller->name:undefined
InfoContoller->pword:undefined
InfoContoller->love：足球
在本案例中，使用ng-controller指令实例化了两个控制器UserController和InfoContoller。AngularJS框架自动为每个控制器实例创建一个作用域对象，但是每个作用域对象只能与ng-controller所在的开始标签和结束标签之间的DOM元素进行数据绑定，我们可以通过$log日志服务分别在UserController和InfoContoller中输出$scope作用域对象的属性。由于用户名和密码输入框只能和UserController中的作用域对象进行数据绑定，因此在InfoContoller控制器中输出作用域对象的name和pword属性时输出结果为undefined。