Angular企业级开发(8)-控制器的作用域
scope概念
scope(作用域)是视图和控制器之间的桥梁，scope本身是一个对象，有方法和属性。scope可以应用在视图和控制器上。
scope简单示例
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Scope Demo</title>
<script>
document.write('<base href="' + document.location + '" />');
</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js@1.5.x" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.10/angular.min.js" data-semver="1.5.10"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<p>Hello {{name}}!</p>
<hr>
<p>{{sayHello()}}</p>
</body>
</html>
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
$scope.sayHello=function(){
return "Angular Scope Demo";
}
});
name是属性，sayHello()是方法。
$rootScope介绍
$rootScope是多个控制器都可以访问的对象，在$rootScope中定义的属性或方法可以在多个控制器中使用。但是$rootScope有可能产生诡异的问题。
AngularJS应用启动并生成视图时,会将根ng-app元素与$rootScope进行绑定。$rootScope 是所有 $scope 的最上层对象,可以理解为一个 AngularJS应用中得全局作用域对象,
$rootScope实例
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Scope Demo</title>
<script>
document.write('<base href="' + document.location + '" />');
</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js@1.5.x" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.10/angular.min.js" data-semver="1.5.10"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<div ng-controller="Ctrl1">
<p>{{name1}}</p>
<p>value from $rootScope:{{rootScopeValue}}</p>
</div>
<hr>
<div ng-controller="Ctrl2">
<p>{{name2}}</p>
<p>value from $rootScope:{{rootScopeValue}}</p>
</div>
</body>
</html>
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($rootScope) {
$rootScope.rootScopeValue="The value from $rootScope";
});
app.controller('Ctrl1', function($scope) {
$scope.name1="username in Ctrl1";
});
app.controller('Ctrl2', function($scope,$rootScope,$timeout) {
$scope.name2="username in Ctrl2";
$timeout(function(){
$rootScope.rootScopeValue="change $rootScope value in Ctrl2";
},3000)
});
小结
scope作用域不是从ng-controller开始的，之前个人理解都是以为是ng-controller开始的标签，视图上才绑定scope的属性和方法是错误的。scope在AngularJS中了提供视图和控制器之前数据绑定的桥梁$rootScope作用域顶层，嵌套的控制器可以继承到$rootScope的属性和方法。
参考资料
Angular企业级开发(8)-控制器的作用域的更多相关文章
- Angular企业级开发(7)-MVC之控制器
1.MVC中的控制器 AngularJS的控制器主要为了把模型和视图连接在一起.大多数业务逻辑操作都会放在视图对应的控制器中.当然如果我们能够把业务逻辑放到后端的REST服务中,就可以开发轻量级Ang ...
- Angular企业级开发(5)-项目框架搭建
1.AngularJS Seed项目目录结构 AngularJS官方网站提供了一个angular-phonecat项目,另外一个就是Angular-Seed项目.所以大多数团队会基于Angular-S ...
- Angular企业级开发-AngularJS1.x学习路径
博客目录 有链接的表明已经完成了,其他的正在建设中. 1.AngularJS简介 2.搭建Angular开发环境 3.Angular MVC实现 4.[Angular项目目录结构] 5.[SPA介绍] ...
- Angular企业级开发(3)-Angular MVC实现
1.MVC介绍 Model-View-Controller 在20世纪80年代为程序语言Smalltalk发明的一种软件架构.MVC模式的目的是实现一种动态的程序设计,使后续对程序的修改和扩展简化,并 ...
- Angular企业级开发(4)-ngResource和REST介绍
一.RESTful介绍 RESTful维基百科 REST(表征性状态传输,Representational State Transfer)是Roy Fielding博士在2000年他的博士论文中提出来 ...
- Angular企业级开发(2)-搭建Angular开发环境
1.集成开发环境 个人或团队开发AngularJS项目时,有很多JavaScript编辑器可以选择.使用优秀的集成开发环境(Integrated Development Environment)能节省 ...
- Angular企业级开发(1)-AngularJS简介
AngularJS介绍 AngularJS是一个功能完善的JavaScript前端框架,同时是基于MVC(Model-View-Controller理念的框架,使用它能够高效的开发桌面web app和 ...
- Angular企业级开发(6)-使用Gulp构建和打包前端项目
1.gulp介绍 基于流的前端自动化构建工具,利用gulp可以提高前端开发效率,特别是在前后端分离的项目中.使用gulp能完成以下任务: 压缩html.css和js 编译less或sass等 压缩图片 ...
- Angular企业级开发(9)-前后端分离之后添加验证码
1.背景介绍 团队开发的项目,前端基于Bootstrap+AngularJS,后端Spring MVC以RESTful接口给前端调用.开发和部署都是前后端分离.项目简单部署图如下,因为后台同时采用微服 ...
随机推荐
- jQuery仿淘宝图片无缝滚动轮播
自己前天,也就是1月8日的时候早上自己写了一个图片滚动轮播(基于jQuery). 其实几个月以前就有朋友问过我怎么做出和淘宝上面一样的滚动轮播,一直到现在也没有真正的写好,这次写得差不多了. 但是还有 ...
- Voilin 与 乐谱
小提琴属于高音乐器,所以它使用的是高音谱号: 用音的时候,线不够用,那就得上加线,或下加线. 小提琴的弦对应的五线谱的位置为: 第四弦,对应五线谱的下加两条线的下面 第三弦,对应五线谱的第一线的下面 ...
- jQuery动画高级用法（上）——详解animation中的.queue()动画队列插队函数
决定对animate方面做一些总结,希望能给大家一些启发和帮助 从一个实际应用谈起 今天不谈animate().fadeIn().fadeOut().slideUp().show().hide()诸如 ...
- 响应的系统设置的事件——Configuration类简介
Configuration类专门用于描述手机设备上的配置信息,这些配置信息既包括用户特定的配置项,也包括系统的动态设置配置. 程序可调用Activity的如下方法来获取系统的Configuration ...
- 大数据时代的杀手锏----Tachyon
一.Tachyon系统的简介 Tachyon是一个分布式内存文件系统,可以在集群里以访问内存的速度来访问存在tachyon里的文件.把 Tachyon是架构在最底层的分布式文件存储和上层的各种计算框架 ...
- 看完让你彻底搞懂Websocket原理
偶然在知乎上看到一篇回帖,瞬间觉得之前看的那么多资料都不及这一篇回帖让我对 websocket 的认识深刻有木有.所以转到我博客里,分享一下.比较喜欢看这种博客,读起来很轻松,不枯燥,没有布道师的阵仗 ...
- Eclipse设置Tab键为空格！
http://z-hua.iteye.com/blog/1056713 今天设置Eclipse中按Tab键为4个空格,这里标记下! Window-->Preferences-->Java- ...
- Netty学习笔记
一些类与方法说明 1)ByteBuf ByteBuf的API说明: Creation of a buffer It is recommended to create a new buffer usin ...
- 2017-01-27-hibernate环境搭建
Hibernate的环境搭建(uid方式): 1:导入包 2:创建实体对象 3:hibernate的映射配置文件 4:hibernate的核心配置文件 5:创建测试类实现表的创建 2:创建实体对象-U ...
- Hadoop权威指南:HDFS-Hadoop存档
Hadoop权威指南:HDFS-Hadoop存档 [TOC] 每个文件按块方式存储, 每个块的元数据存储在namenode的内存中 Hadoop存档文件或HAR文件是一个更高效的文件存档工具,它将文件 ...