angularJS学习之路(四)---作用域(1)
2015-11-22 20:51
561 查看
这里提到的“作用域”的概念,是一个在范围上与 DOM 结构一致,数据上相对于某个 $scope 对象的属性的概念。我们还是从 HTML 代码上来入手:
上面的代码中,我们给一个 div 元素指定了一个 BoxCtrl ,那么, div 元素之内,就是 BoxCtrl 这个函数运行时, $scope 这个注入资源的控制范围
作用域很关键,因为它涉及到表达式的上下文
首先要知道 $scope 的意思或者作用:
$scope 作用是:定义应用业务逻辑、 控制器方法 、视图属性
作用域 : 是动态绑定的 这个是angularjs框架的一个好处 :无论是在客户端进行视图修改还是在依赖发生变化时 视图都会被重新渲染
作用域 :监视数据模型变化 当然指的是在它的范围内
作用域:发送变化时 由apply机制实现通知
作用域:界定范围是由 ng-app 元素确定的,这个被应用的元素和它内部的所有元素 都在这个$scope 范围内
作用域包含作用域 类似 继承 这个概念
代码:
默认情况下 angularjs 在当前作用域中 无法找到这个属性的时候,便会在父级作用域中进行查找 一级一级的往上找,直到找到为止,
如果没有找到 视图不会发生更新
遵守 原型继承的机制 子类可以调用父类的属性和方法
上面代码的结果是这样的:
Say Hello
{"greeted":false}
然后你点击Say Hello 视图更新:
Say Hello
{"greeted":false,"name":"hello world"}
<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 范围内
作用域包含作用域 类似 继承 这个概念
代码:
<!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"}
相关文章推荐
- angular学习笔记
- angularJS学习之路(三)---控制器
- angularJS学习之路(二)---模块
- [AngularJS] jQuery时代
- angular
- [AngularJS] 常用指令
- angularJS学习之路(一)---开始入门
- ANGULARJS前端路由的基本原理
- [AngularJS] 入门
- angular框架
- angularjs控制层
- angular的基础知识
- AngularJS 入门学习
- angularjs学习总结
- angular的filter日期格式
- angular的$interpolate服务
- angularjs过滤器filter处理时间格式
- AngularJs $anchorScroll、$controller、$document
- AngularJS路由系列(6)-- UI-Router的嵌套State
- AngularJS路由系列(5)-- UI-Router的路由约束、Resolve属性、路由附加数据、路由进入退出事件