极客教程AngularJS 作用域
作用域是一个特殊的JavaScript对象，用于连接控制器和视图。作用域包含了模型数据。在控制器中，模型数据通过$scope对象来访问。
<script>
var mainApp = angular.module("mainApp", []);
mainApp.controller("shapeController", function(scope) {scope.message = "In shape controller";
$scope.type = "Shape";
});
</script>
上面的示例中考虑了以下重要点：
- 在构造函数定义期间，将
$scope作为第一个参数传递给控制器。 -
$scope.message和$scope.type是在HTML页面中使用的模型。 -
我们给反映在应用程序模块中的controller为shapeController的模型赋值。
-
我们可以在
$scope中定义函数。
作用域继承
作用域是控制器特定的。如果我们定义了嵌套控制器，那么子控制器会继承父控制器的作用域。
<script>
var mainApp = angular.module("mainApp", []);
mainApp.controller("shapeController", function(scope) {scope.message = "In shape controller";
scope.type = "Shape";
});
mainApp.controller("circleController", function(scope) {
$scope.message = "In circle controller";
});
</script>
在上面的例子中，考虑了以下重要点：
- 我们在shapeController中为模型分配了值。
-
我们在名为circleController的子控制器中覆盖了message。当在名为circleController的控制器模块中使用message时，将使用覆盖的message。
示例
以下例子展示了所有上述指令的使用。
testAngularJS.htm
<html>
<head>
<title>Angular JS Forms</title>
</head>
<body>
<h2>AngularJS Sample Application</h2>
<div ng-app = "mainApp" ng-controller = "shapeController">
<p>{{message}} <br/> {{type}} </p>
<div ng-controller = "circleController">
<p>{{message}} <br/> {{type}} </p>
</div>
<div ng-controller = "squareController">
<p>{{message}} <br/> {{type}} </p>
</div>
</div>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">
</script>
<script>
var mainApp = angular.module("mainApp", []);
mainApp.controller("shapeController", function(scope) {scope.message = "In shape controller";
scope.type = "Shape";
});
mainApp.controller("circleController", function(scope) {
scope.message = "In circle controller";
});
mainApp.controller("squareController", function(scope) {
scope.message = "In square controller";scope.type = "Square";
});
</script>
</body>
</html>
输出
在网页浏览器中打开文件testAngularJS.htm并查看结果。
