《开经偈》
无上甚深微妙法
百千万劫难遭遇
我今见闻得受持
愿解如来真实义
控制器的作用域范围的核心要义就是一句话,早懂早超生。哪一句?
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>
效果是这样的:
作用域存在父作用域和子作用域一说,这种父子关系是怎么实现的,又是怎么体现的?
<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>