AngularJs作用域理解
基于AngularJS入门与进阶（江荣波 著）这本书的笔记
AngularJS 1.x的demo
AngularJS1.x和Angular2,4,5是不一样的两个东西，构建方式，语法，都很多不同
AngularJS程序中作用域的主要功能是存放模型数据，当HTML页面中出现ng-app和ng-controller指令时，AngularJS框架会自动创建作用域对象，我们只需将其注入即可。
每个AngularJS应用至少会有一个名称为$rootScope的作用域，它是AngularJS应用的根作用域。框架中的ng-app指令，它可以出现在任何HTML标签中，用于启动AngularJS框架。当AngularJS启动时会自动创建一个根作用域对象scope，默认情况下，该子作用域会继承
rootScope作用域对象中新增了userName属性，然后在scopeController控制器的子作用域中取到成功输出
name:jock
<!DOCTYPE html>
<html lang="en" ng-app="scopeApp">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="/lib/angular/angular.js"></script>
<script type="text/javascript">
var scopeApp = angular.module("scopeApp",[]);
scopeApp.controller("scopeController",function ($scope,$log) {
$log.log("name:" + $scope.userName)
});
</script>
</head>
<body ng-init="userName='jock'">
<div ng-controller="scopeController"></div>
</body>
</html>
AngularJs作用域继承
JavaScript对像继承机制
JavaScript对像继承机制有三种
- 构造方法原型链继承
- 使用appley、call方法实现继承
- 对像实例间继承
AngularJs是基于方法原型链继承实现的，这里记录下概念，书中原话：每个JavaScript构造方法都有一个名称为prototype的属性，可以指向另一个对象。当我们访问对象属性时（例如obj.name），JavaScript引擎会从对象的所有属性中查找该属性，如果找到就返回属性值，如果没有找到就继续从prototype属性指向的对象属性中查找，如果仍然没有找到，则会沿着prototype链一直查找下去，直到prototype链结束或找到对象为止。
<script type="text/javascript">
function People() {
this.eat = function () {
console.log("pelple eat------------")
}
}
function Man(age) {
this.age = age;
}
// Man 的prototype属性指向People
Man.prototype = new People();
var man = new Man("20");
console.log(man.age);
// 本身如果没有，会找指向的prototype 对像
man.eat();
</script>
控制台输出
20
pelple eat------------
AngularJs作用域对像原型继承
AngularJs继承采用构造方法原型继承，在AngularJs作用域构造方法中提供了一个$new()成员方法，用于创造子作用域，源码这里就不重复了，书里面很详细，只记录下过程
var parent = $rootScope;
var child = parent.$new();
示例代码
<!DOCTYPE html>
<html lang="en" ng-app="scopeApp">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="/lib/angular/angular.js"></script>
<script type="text/javascript">
var scopeApp = angular.module("scopeApp",[]);
scopeApp.controller("fatherScope",function ($scope,$log) {
$scope.age = "18";
});
scopeApp.controller("childScope",function ($scope,$log) {
$scope.sex = "男";
console.log("name:" + $scope.userName + " "+ "age:" + $scope.age + " " + "sex:" + $scope.sex );
});
</script>
</head>
<body ng-init="userName='jock'">
<div ng-controller="fatherScope">
<div ng-controller="childScope"></div>
</div>
</body>
</html>
控制台成功输出
name:jock age:18 sex:男
AngularJS框架查找到ng-app指令时启动应用，创建$rootScope作用域。然后AngularJS框架查找到第一个ng-controller指令，指向名称为fatherScope的控制器，并调用$rootScope.$new()方法，以原型继承的方式创建$rootScope作用域的子作用域对象（记为$scope1）。当fatherScope构造方法接收一个名称为$scope的参数时，AngularJS实例化控制器对象时会把$scope1对象注入控制器对象中。接下来AngularJS继续遍历DOM元素，遇到第二个嵌套的ng-controller指令时调用$scope1．new()方法，以$scope1为原型创建子作用域（记为$scope2，$scope2作用域对象能够访问$scope1作用域对象的所有属性）。
网友评论