《开经偈》
无上甚深微妙法
百千万劫难遭遇
我今见闻得受持
愿解如来真实义
控制器的作用域范围的核心要义就是一句话,早懂早超生。哪一句?
AngularJs自动为每一个控制器
ng-controller创建一个作用域$scope,但是每一个作用域$scope只能与ng-controller所在的开始标签,结束标签之间的DOM元素进行数据绑定。
<html ng-app = "app">
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="../angular-1.6.9/angular.js"></script>
</head>
<body>
<div ng-controller="initController">
price: <input type="number" ng-model="price"/><br>
amount: <input type="number" ng-model="amount"/><br>
total: {{total()}}
</div>
<div ng-controller="destroyController">
total: {{result()}}
</div>
</body>
<script type="text/javascript">
function initController($scope, $log) {
$scope.price = 8.0;
$scope.amount = 10;
$scope.total = function() {
return $scope.price * $scope.amount;
}
}
function destroyController($scope, $log) {
$scope.result = function() {
/*企图在destroyController作用域中使用initController作用域中的price和amount*/
return $scope.price * $scope.amount;
}
}
var app = angular.module("app", []);
app.controller("initController", initController);
app.controller("destroyController", destroyController);
</script>
</html>
效果是这样的:
![](https://i-blog.csdnimg.cn/blog_migrate/bc3c49c363187b1f9c08762ac88f5123.png)
作用域存在父作用域和子作用域一说,这种父子关系是怎么实现的,又是怎么体现的?
<html ng-app = "app" ng-init="rootParam='C++'">
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="../angular-1.6.9/angular.js"></script>
</head>
<body>
<div ng-controller="parentController" ng-init="parentParam='Java'">
{{rootParam}}<br>
<div ng-controller="childController">
{{rootParam}}<br>
{{parentParam}}<br>
</div>
</div>
<div>
<span>
当程序加载到ng-app = "app"时,它会认出这是一个模块,它会自动为这个模块生成一个作用域$scope。
这就是当前模块的根作用域$rootScope,当然模块内部可能还有控制器比如ng-controller="parentController"
当程序加载到ng-controller="parentController"时,它会自动为控制器创建一个子作用域$scope,注意了,是子作用域,
什么叫子作用域?相对于父作用域的子作用域。问题是一个作用域怎么就成了另一个作用域的子作用域?因为你是在人家的作用域范围
(开始标签和结束标签之间定义)之内定义的,所以叫做子作用域。既然是父子关系,那肯定存在财产继承啊,对,父作用域的属性和方法
可以被子作用域继承,也就是说,可以在子作用域范围内引用父作用域的属性和方法。
</span>
</div>
</body>
<script type="text/javascript">
function parentController($scope, $log) {}
function childController($scope, $log) {}
var app = angular.module("app", []);
app.controller("parentController", parentController);
app.controller("childController", childController);
</script>
</html>