angular入门学习之四

最新推荐文章于 2024-04-20 12:03:21 发布

xy_ggsddu

最新推荐文章于 2024-04-20 12:03:21 发布

阅读量282

点赞数

分类专栏： angular 文章标签： angular

本文链接：https://blog.csdn.net/xy_ggsddu/article/details/50921379

版权

angular 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

最近公司有个项目需要写，所以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个控制器，并且赋予他们相加的方法。可以看到子作用域可以获取父级的变量并且进行运算等等。