作用域
来源:互联网 发布:淘宝四件套好评语 编辑:程序博客网 时间:2024/04/30 01:15
这里提到的“作用域”的概念,是一个在范围上与 DOM 结构一致,数据上相对于某个 $scope 对象的属性的概念。我们还是从 HTML 代码上来入手:
- <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 这个注入资源的控制范围。在代码中我们看到的click() , w , h 这些东西,它们本来的位置对应于 $scope.click ,$scope.w , $scope.h 。
我们在后面的 js 代码中,也可以看到我们就是在操作这些变量。依赖于 ng 的数据绑定机制,操作变量的结果直接在页面上表现出来了。
数据与模板的绑定数据-->模板
数据到表现的绑定,主要是使用模板标记直接完成的:
- <p>{{ w }} x {{ h }}</p>
- <p id="test" ng-controller="TestCtrl">{{ a }}</p>
- <script type="text/javascript">
- var TestCtrl = function($scope){
- $scope.a = '123';
- }
- angular.bootstrap(document.documentElement);
123
。这时,我们可以打开一个终端控制器,输入:- $('#test').scope().a = '12345';
- $('#test').scope().$digest();
上面的代码执行之后,就可以看到页面变化了。
对于使用 ng 进行的事件绑定,在处理函数中就不需要去关心 $digest() 的调用了。因为 ng 会自己处理。源码中,对于 ng 的事件绑定,真正的处理函数不是指定名字的函数,而是经过 $apply() 包装过的一个函数。这个 $apply() 做的一件事,就是调用根作用域$rootScope 的$digest() ,这样整个世界就清净了:
- <p id="test" ng-controller="TestCtrl" ng-click="click()">{{ a }}</p>
- <script type="text/javascript" charset="utf-8">
- var TestCtrl = function($scope){
- $scope.a = '123';
- $scope.click = function(){
- $scope.a = '456';
- }
- }
- angular.bootstrap(document.documentElement);
- function(){
- $scope.$apply(
- function(){
- $scope.click();
- }
- )
- }
- $rootScope.$digest();
模板-->数据
模板到数据的绑定,主要是通过 ng-model 来完成的:
- <input type="text" id="test" ng-controller="TestCtrl" ng-model="a" />
- <script type="text/javascript" charset="utf-8">
- var TestCtrl = function($scope){
- $scope.a = '123';
- }
这时修改 input 中的值,然后再在控制终端中使用:
- $('#test').scope().a
查看,发现变量 a 的值已经更改了。
实际上, ng-model 是把两个方向的绑定都做了。它不光显示出变量的值,也把显示上的数值变化反映给了变量。这个在实现上就简单多了,只是绑定change 事件,然后做一些赋值操作即可。不过 ng 里,还要区分对待不同的控件。
数据-->模板-->数据-->模板现在要考虑的是一种在现实中很普遍的一个需求。比如就是我们可以输入数值,来控制一个矩形的长度。在这里,数据与表现的关系是:
- 长度数值保存在变量中
- 变量显示于某个 input 中
- 变量的值即是矩形的长度
- input 中的值变化时,变量也要变化
- input 中的值变化时,矩形的长度也要变化
当然,要实现目的在这里可能就不止一种方案了。按照以前的做法,很自然地会想法,绑定 input 的 change 事件,然后去做一些事就好了。但是,我们前面提到过ng-model 这个东西,利用它就可以在不手工处理change 的条件下完成数据的展现需求,在此基础之上,我们还需要做的一点,就是把变化后的数据应用到矩形的长度之上。
最开始,我们面对的应该是这样一个东西:
- <div ng-controller="TestCtrl">
- <div style="width: 100px; height: 10px; background-color: red"></div>
- <input type="text" name="width" ng-model="width" />
- </div>
- <script type="text/javascript" charset="utf-8">
- var TestCtrl = function($scope){
- $scope.width = 100;
- }
- angular.bootstrap(document.documentElement);
- </script>
我们从响应数据变化,但又不使用 change 事件的角度来看,可以这样处理宽度变化:
- var TestCtrl = function($scope, $element){
- $scope.width = 100;
- $scope.$watch('width',
- function(to, from){
- $element.children(':first').width(to);
- }
- );
- }
当然,这种样式的问题,有更直接有效的手段, ng 的数据绑定总是让人惊异:
- <div ng-controller="TestCtrl">
- <div style="width: 10px; height: 10px; background-color: red" ng-style="style">
- </div>
- <input type="text" name="width" ng-model="style.width" />
- </div>
- <script type="text/javascript" charset="utf-8">
- var TestCtrl = function($scope){
- $scope.style = {width: 100};
- }
- angular.bootstrap(document.documentElement);
- </script>
- 作用域::的作用
- 作用域的作用
- 作用域
- 作用域
- 作用域
- 作用域
- 作用域::
- 作用域
- 作用域
- 作用域
- 作用域
- 作用域
- 作用域
- 作用域
- 作用域
- 作用域
- 作用域
- 作用域
- IIS链接数并发问题
- Java堆内存的10个要点
- XML—— 验证XML文档
- flume学习
- C++指针的概念
- 作用域
- 状态和无状态--2种服务器架构之间的比较 .
- ios非常有用的方法整理
- 第 3 章 CSS 选择器
- Win8快速开机到底隐藏了什么秘密
- loadrunner简单使用——HTTP,WebService,Socket压力测试脚本编写
- 虚基类的妙用
- SpringMVC深度探险(四) —— SpringMVC核心配置文件详解
- hdu acm 3018 Ant Trip