angularJS学习之路(四)---作用域(1)

2019-07-08 16:39:58 浏览数 (1)

这里提到的“作用域”的概念,是一个在范围上与 DOM 结构一致,数据上相对于某个 $scope 对象的属性的概念。我们还是从 HTML 代码上来入手:

代码语言:javascript复制
  <div ng-controller="BoxCtrl">

    <div style="width: 100px; height: 100px; background-color: red;"

         ng-click="click()">

    </div>

    <p>{{ w }} x {{ h }}</p>

    <p>W: <input type="text" ng-model="w" /></p>

    <p>H: <input type="text" ng-model="h" /></p>

  </div>

上面的代码中,我们给一个 div 元素指定了一个 BoxCtrl ,那么, div 元素之内,就是 BoxCtrl 这个函数运行时, $scope 这个注入资源的控制范围

作用域很关键,因为它涉及到表达式的上下文   

首先要知道   $scope 的意思或者作用:

 $scope 作用是:定义应用业务逻辑、  控制器方法   、视图属性

作用域 : 是动态绑定的  这个是angularjs框架的一个好处  :无论是在客户端进行视图修改还是在依赖发生变化时   视图都会被重新渲染

作用域  :监视数据模型变化   当然指的是在它的范围内

作用域:发送变化时  由apply机制实现通知

作用域:界定范围是由  ng-app 元素确定的,这个被应用的元素和它内部的所有元素   都在这个$scope 范围内

作用域包含作用域   类似   继承  这个概念

代码:

代码语言:javascript复制
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div ng-app="myApp" ng-controller="ParentController">
			<div ng-controller="ChildController">
				<a ng-click="sayHello()">Say Hello</a>
			</div>
			{{person}}
		</div>
		
		<script type="text/javascript" src="../js/angular.min.js" ></script>
		<script>
			var app =angular.module("myApp",[]);
			app.controller('ParentController',function($scope){
				$scope.person = {greeted:false};
			});
			
			app.controller('ChildController',function($scope) {
				$scope.sayHello = function(){
					$scope.person.name = "hello world";
				};
			});
			
		</script>
		
	</body>
</html>

默认情况下  angularjs 在当前作用域中   无法找到这个属性的时候,便会在父级作用域中进行查找  一级一级的往上找,直到找到为止,

如果没有找到 视图不会发生更新

遵守 原型继承的机制   子类可以调用父类的属性和方法

上面代码的结果是这样的:

Say Hello

{"greeted":false}

然后你点击Say Hello  视图更新:

Say Hello

{"greeted":false,"name":"hello world"}

0 人点赞