最近公司有个项目需要写,所以blog更新就停了一段时间,没关系,我会持续更新的。虽然没什么人看,但是我知道其实写博客不仅仅是给别人看,也是对自己理解的一个梳理。
废话不多说,入门四写什么呢,即scope的层次结构。
Scope在一个层次结构组织中,改层次结构使scope有良好的组织结构,并且与他们所代表的视图上下文相关联。在AngularJS模块级别中有一个根scope,接下来是其他子scope的实现,并且子scope可以互相嵌套,从而使代码有层次结构。
先看代码
<!doctype html>
<html ng-app="myApp">
<head>
<title>Angular</title>
</head>
<body>
<div ng-controller="LevelA"><!--根Scope-->
<h3>{{title}}</h3>
ValueA = {{valueA}} <input type="button" ng-click="inc()" value="+"/>
<h3>sum: {{valueA}}</h3>
<div ng-controller="LevelB"><!--二级Scope-->
<h3>{{title}}</h3>
ValueA = {{valueA}}<br>
ValueB = {{valueB}}<!--获取上级变量-->
<input type="button" ng-click="inc()" value="+"/>
<h3>sum:{{valueA+valueB}}</h3>
<div ng-controller="LevelC"><!--三级Scope-->
<h3>{{title}}</h3>
ValueA = {{valueA}}<br>
ValueB = {{valueB}}<br><!--跨级获取变量-->
ValueC = {{valueC}}
<input type="button" ng-click="inc()" value="+"/>
<h3>sum:{{valueA+valueB+valueC}}</h3>
<div ng-controller="LevelD"><!--四级Scope-->
<h3>{{title}}</h3>
ValueA = {{valueA}}<br>
ValueD = {{valueD}}
<input type="button" ng-click="inc()" value="+"/>
<h3>sum:{{valueA+valueD}}</h3>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="../angular.js"></script>
<script type="text/javascript" src="scope_hierarchy.js"></script>
</body>
</html>
angular.module('myApp',[]).controller('LevelA',function($scope){//不同级别控制器及方法。
$scope.title = "LevelA";
$scope.valueA = 1;
$scope.inc = function(){
$scope.valueA++;
};
}).controller("LevelB",function($scope){
$scope.title="LevelB";
$scope.valueB=1;
$scope.inc = function(){
$scope.valueB++;
}
}).controller("LevelC",function($scope){
$scope.title="LevelC";
$scope.valueC=1;
$scope.inc = function(){
$scope.valueC++;
}
}).controller("LevelD",function($scope){
$scope.title="LevelD";
$scope.valueD=1;
$scope.inc = function(){
$scope.valueD++;
}
});
这里我们定义了4个控制器,并且赋予他们相加的方法。可以看到子作用域可以获取父级的变量并且进行运算等等。