AngularJS 服务(Service) AngularJS 视图
AngularJS Scope(作用域)
作用域是一个特殊的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页面中使用的模型。
我们为应用程序模块中反映的模型分配值，该模块的控制器为shapeController。
我们可以在$scope中定义函数。
作用域继承
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的子控制器中覆盖消息。当在名为circleController的控制器模块中使用message时，将使用覆盖的消息。
在线示例
以下示例显示了上述所有指令的使用。
testAngularJS.htm
<html>
<head>
<title>Angular JS Forms</title>
</head>
<body>
<h2>AngularJS Scope(作用域)</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://cdn.staticfile.org/angular.js/1.3.14/angular.min.js">
</script>
<script>
var mainApp = angular.module("mainApp", []);
mainApp.controller("shapeController", function($scope) {
$scope.message = "形状控制器";
$scope.type = "Shape";
});
mainApp.controller("circleController", function($scope) {
$scope.message = "圆圈控制器";
});
mainApp.controller("squareController", function($scope) {
$scope.message = "方形控制器";
$scope.type = "Square";
});
</script>
</body>
</html>测试看看‹/›输出结果
在网络浏览器中打开文件testAngularJS.htm并查看结果。
AngularJS 服务(Service) AngularJS 视图