AngularJS笔记---作用域和控制器
什么是作用域. 什么是控制器, 作用域包含了渲染视图时所需的功能和数据,它是所有视图的唯一源头。可以将作用域理解成试图模型(ViewModel). 作用域之间可以是包含关系也可以是独立关系.可以通过设置不同的ng-Controller来让$scope处于不同的作用域下面.
一.$rootScope
1.1 $rootScope可以理解成全局变量,一旦赋值对整个module都有效.$rootScpoe不依赖于任何一个controller, app.run是module被加载时候执行的代码. 可以理解成Silverlight MVVM里面的oninit方法.
<html>
<script src="angular.min.js"></script>
<script type="text/javascript">
var app = angular.module('myapp',[]);
app.run(function($rootScope){
$rootScope.message="hello frank!";
});
</script>
<head>
<div ng-app="myapp">
<h1>{{ message }}</h1>
</div>
</head>
<body>
</body>
</html>
1.2 AngularJS会优先获取Controller中$scope添加的值.
代码如下: 分别有三个{message}. testControl2中在$scope中重新赋予了message值.
<html>
<script src="angular.min.js"></script>
<script type="text/javascript">
var app = angular.module('myapp',[]);
app.run(function($rootScope){
$rootScope.message="hello frank!";
}); app.controller('testControl1',function(){ }); app.controller('testControl2',function($scope){
$scope.message = "hello loch!";
}); </script>
<head>
<div ng-app="myapp">
{{ message }}
<div ng-controller="testControl1">
{{ message }}
</div>
<div ng-controller="testControl2">
{{ message }}
</div>
</div>
</head>
<body>
</body>
</html>
运行结果: testControl2下的message被修改了.
hello frank!
hello frank!
hello loch!
二. 控制器(ng-Controller)
ng-Controller氛围两种情况一种是包含,另一种是独立. 我们暂且叫做 父子关系和兄弟关系吧.
2.1 父子关系
2.1.1 代码如下:ChildController 包含在了ParentController里面, 两个button都对Count字段进行赋值。
<html>
<script src="angular.min.js"></script>
<script type="text/javascript">
var app = angular.module('myapp',[]); app.controller('ParentController',function($scope){
$scope.Count = ;
$scope.addParent = function(){
$scope.Count+=;
}
}); app.controller('ChildController',function($scope){
// $scope.Count = 1;
$scope.addChild = function(){
$scope.Count+=;
}
}); </script>
<head>
<div ng-app="myapp">
<div ng-controller="ParentController">
<span>{{ Count }}</span>
<button ng-click="addParent()">ParentClick</button>
<div ng-controller="ChildController">
<span> {{Count}} </span>
<button ng-click="addChild()">ChildClick</button>
</div>
</div>
</div>
</head>
<body>
</body>
</html>
2.1.2 运行结果:(在上面demo中,有一串被注释掉的代码,)
A 代码被注解: 当一开始点击ParentClick的时候两个Count一起增加, 然后点击ChildClick的时候只有ChildDiv的Count在增加,然后再回去点击ParentClick的时候,就只有ParentCount在自增
B.代码没被注解: 两者之间的自增都是独立分开的,互补关联.
2.1.3 总结:
因为在AngularJS中会默认先找当前Controller下的值,找不到再去找父类Controller值,如果还找不到就去找$rootScope的值, 对于A类情况在没点击ChildClick的时候,ChildController还没有设置Count的值,那么对应的{Count}只有先去取ParentController里面的$scope.count的值. 当点击了ChildClick后,ChildController中的$scope.count被创建,然后两个Controller就此开始独立.
2.2 兄弟关系.
运行结果: 两个Controller下的Count独立,自增互不影响.
<html>
<script src="angular.min.js"></script>
<script type="text/javascript">
var app = angular.module('myapp',[]); app.controller('BrotherOne',function($scope){
$scope.Count = ;
$scope.addParent = function(){
$scope.Count+=;
}
}); app.controller('BrotherTwo',function($scope){
$scope.Count = ;
$scope.addChild = function(){
$scope.Count+=;
}
}); </script>
<head>
<div ng-app="myapp">
<div ng-controller="BrotherOne">
<span>{{ Count }}</span>
<button ng-click="addParent()">ParentClick</button>
</div>
<div ng-controller="BrotherTwo">
<span> {{ Count }} </span>
<button ng-click="addChild()">ChildClick</button>
</div>
</div>
</head>
<body>
</body>
</html>
三. 本篇总结
A.$rootScope == 全局变量
B.绑定的变量默认先从当前Controller的$scope去取
AngularJS笔记---作用域和控制器的更多相关文章
- AngularJS Scope(作用域)
1. AngularJS Scope(作用域) Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带. Scope 是一个对象,有可用的方法和属性. Sc ...
- angualrjs学习总结二(作用域、控制器、过滤器)
一:Scope简介 Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带.Scope 是一个对象,有可用的方法和属性.Scope 可应用在视图和控制器上. ...
- 理解angularJS中作用域$scope
angularJS中作用域是什么 作用域(scope)是构成angularJS应用的核心基础,在整个框架中都被广泛使用,因此了解它如何工作是非常重要的 应用的作用域是和应用的数据模型相关联的,同时作用 ...
- AngularJS学习之旅—AngularJS Scope作用域(五)
1.AngularJS Scope(作用域) Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带. Scope 是一个对象,有可用的方法和属性. Sco ...
- AngularJS讲义 - 作用域
什么是作用域? Angular中作用域(scope)是模板以及工作的上下文环境,作用域中存放了应用模型和视图相关的回调行为.作用域是层次化结构的与相关联的DOM结构相对应.作用域可以观察表达式以及传播 ...
- 理解AngularJS的作用域Scope
AngularJS中,子作用域一般都会通过JavaScript原型继承机制继承其父作用域的属性和方法.但有一个例外:在directive中使用scope: { ... },这种方式创建的作用域是一个独 ...
- AngularJS: 自定义指令与控制器数据交互
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- 黄聪:AngularJS 动态加载控制器实例-ocLoazLazy
一.AngularJS动态加载控制器和视图实例 路由配置关键代码: //二级页面 $stateProvider.state('main', { url: '/:name', /**如果需要动态加载数据 ...
- angularJs的作用域和依赖注入
一.angularJs的作用域 &scope这是局部作用域,先在局部作用域中找,如果没有就在全局作用域中找 &rootScope这是全局作用域 <!DOCTYPE HTML&g ...
随机推荐
- LINQ to SQL语句(12)之Delete和使用Attach
1.简单形式 说明:调用DeleteOnSubmit方法即可. OrderDetail orderDetail = db.OrderDetails.First (c => c.OrderID = ...
- HTML5翻页电子书
体验效果:http://hovertree.com/texiao/jquery/60/ 图片请用正方形的 参考:http://hovertree.com/h/bjaf/d339euw9.htmhttp ...
- SAP ABAP学习路线图--标准教程
SAP ABAP学习路线图--标准教程 摘自:http://www.cnblogs.com/clsoho/archive/2010/07/05/1771400.html
- C# Socket 模拟http服务器帮助类
0x01 写在前面 0x02 Http协议 0x03 TCP/IP 0x04 看代码 0x05 总结 0x01 写在前面 由于工作中,经常需要在服务器之间,或者进程之间进行通信,分配任务等.用Sock ...
- CSS基础之居中显示
这些天忙完了一些项目后,终于有时间来总结一下了.自己就把做项目过程中的体会和理解到的一些东西和大家分享一下.有错请指正!! 在css中,元素居中显示,是基础也是一个小难点.我们经常不知为何总是不能把元 ...
- ubuntu下常用命令(一)
1.查看目录 Ctrl+L 2.在终端下:复制命令:Ctrl + Shift + C 组合键.粘贴命令:Ctrl + Shift + V 组合键. 3.解压 tar xzf flie.tar.gz 4 ...
- Hibernate总结(三)
在Hibernate(二)中,简单总结了表与表之间的级联操作,但是并没有总结查询操作,这一篇将总结Hibernate查询所实现的加载策略. 加载策略: 立刻加载:马上去数据库中查询 延迟加载:当使用数 ...
- 使用python发送和接收邮件
关于电子邮件 大学之前,基本不用邮箱,所以基本感觉不到它的存在,也不知道有什么用:然而大学之后,随着认识的人越来越多,知识越来越广泛,邮箱已然成为很重要的通讯工具,大学一些课程作业需要有邮箱发给老师, ...
- mybatis中的#和$的区别(转)
#相当于对数据 加上 双引号,$相当于直接显示数据 1. #将传入的数据都当成一个字符串,会对自动传入的数据加一个双引号.如:order by #user_id#,如果传入的值是111,那么解析成sq ...
- AntiModerate – 渐进式图片加载的 JavaScript 库
AntiModerate 是一个渐进式图片加载的 JavaScript 库.我们多数看到的图片显示模式,都是从上到下逐渐显示的,这是“标准式”图像:而有的图片是先出现一个很低分辨率的图像轮廓,类似加了 ...