$scope作用域与依赖注入
一、$scope与$rootscope作用域
$scope下的数据作为该控制器下的数据moduel,只有在该控制器下才能够访问;而$rootScope则可以可以再任何有效的地方访问到,这个有效的地方指的是ng-app声明之下的地方,也就是应用angularJS的地方。
以我的理解,就是把控制器加到哪个元素下面,相当于把其下的$scope下的元素带给了这个元素及其子孙,他们就可以访问这个控制器下$scope下的数据,其他控制器则不能。
1.$scope
$scope定义的是局部作用域,也就是只有在该控制器下才能够对其中的值进行访问。
<!DOCTYPE html>
<html ng-app>
<head lang="en">
<meta charset="UTF-8">
<script src="angular.min.js"></script>
<title></title>
<script>
function Aaa($scope){
$scope.name='tong';
}
</script>
</head>
<body>
<div ng-controller="Aaa">
<p>{{name}}</p>
</div>
{{name}}
</body>
</html>
执行结果是只有第一个name显示了“tong",第二个压根没有显示;
2.$rootscope
$rootscope定义的是全局作用域,在其中定义的变量可以再任何有效的地方访问到,这个有效的地方指的是ng-app声明之下的地方,也就是应用angularJS的地方。
<!DOCTYPE html>
<html ng-app>
<head lang="en">
<meta charset="UTF-8">
<script src="angular.min.js"></script>
<title></title>
<script>
function Aaa($scope,$rootScope){
$scope.name='tong';
$rootScope.age=19;
}
</script>
</head>
<body>
<div ng-controller="Aaa">
<p>{{name}}</p>
<p>{{age}}</p>
</div>
{{age}}
</body>
</html>
执行结果是:
tong
19
19
下面我把ng-app放到<div>中,执行结果如下:
tong
19
{{age}}
3.探究作用原理
其作用域原理很像JS中作用域的原理,若本作用域中有这个变量,则直接访问,若没有,则寻找上一层,依次类推。
<!DOCTYPE html>
<html ng-app>
<head lang="en">
<meta charset="UTF-8">
<script src="angular.min.js"></script>
<title></title>
<script>
function Aaa($scope,$rootScope){
$scope.name='tong';
$rootScope.age=19;
}
function Bbb($scope){
$scope.name='feng';
}
</script>
</head>
<body>
<div ng-controller="Aaa" >
<p>{{name}}</p>
<div ng-controller="Bbb">
<p>{{name}}</p>
<p>{{age}}</p>
</div>
</div>
</body>
</html>
执行结果如下:
tong
feng
19
19
二、依赖注入
我们先来看一个小例子。
<script>
function Aaa($scope,$rootScope) {
alert(123);
$scope.name = 'tong';
}
</script>
</head>
<body>
<div ng-controller="Aaa" >
<p>{{name}}</p>
</div>
执行结果是弹出了123。这也就是说Aaa执行了一次,但是我们声明了形参$scope,$rootScope,我们并没有传入实参呀!这就是依赖注入,angularJS根据我们定义的实参,自动传入了angular.min.js文件中的$scope,$rootScope,使得函数通过依赖管理系统仅仅需要声明需要的协作对象,而不需要知道从哪里来。但是要注意的是我们一定要按照要求来写形参,让js文件知道它该传入什么参数。其中$scope,$rootScope,$timeout等等在angularJs中都叫做服务,也就是说每次定义函数时,我们只要知道需要什么服务,然后直接写入形参就可以。
随机推荐
- loadrunner - 安装与破解
最近准备学习LR,借助这个平台,将自己的学习经历记录下来,当然很多都不是原创,都是遇到问题时各种百度,然后梳理下知识是为了避免以后遇到同样的错误时,能回过头来参考参考. 下面的是转载某位大神的博客,尊 ...
- JAVA反射机制o
Reflection是Java 程序开发语言的特征之一,它允许运行中的 Java 程序对自身进行检查,或者说"自审",并能直接操作程序的内部属性.例如,使用它能获得 Java 类中 ...
- java并发编程实战:第五章----基础构建模块
委托是创建线程安全类的一个最有效的策略:只需让现有的线程安全类管理所有的状态即可. 一.同步容器类 1.同步容器类的问题 同步容器类都是线程安全的,容器本身内置的复合操作能够保证原子性,但是当在其上进 ...
- java中创建对象的方法
有4种显式地创建对象的方式: 1.用new语句创建对象,这是最常用的创建对象的方式. 2.运用反射手段,调用java.lang.Class或者java.lang.reflect.Constructor ...
- php萌新|学习|排坑|のmysqli_error()方法的妙用
从开始学习php当现在已经有一个月多.除了每天完成公司布置的日常汇报,也没有耐下性子写一写自己想写的东西.今天就当起个头,坚持一周有个两三片文章或者小总结,也不枉费自己的付出.(我自己都不信,你会信吗 ...
- Android源码设计模式分析开源项目
简述 该项目通过分析Android系统中的设计模式来提升大家对设计模式的理解,从源码的角度来剖析既增加了对Android系统本身的了解,也从优秀 的设计中领悟模式的实际运用以及它适用的场景,避免在实际 ...
- Spring 事务管理案例
事务管理简介 Spring 事务管理有两种方式:一种是编程式事务管理,即通过编写代码实现事物管理,包括定义事务的开始,程序正常执行后的事物提交,异常时进行的事务回滚.另一种是基于AOP技术实现的声 ...
- 将引用了第三方jar包的Java项目打包成jar文件的两种方法
方案一:用Eclipse自带的Export功能 步骤1:准备主清单文件 “MANIFEST.MF”, 由于是打包引用了第三方jar包的Java项目,故需要自定义配置文件MANIFEST.MF,在该项目 ...
- django drf JWT
建议使用djangorestframework-jwt或者djangorestframework_simplejwt,文档为 https://github.com/GetBlimp/django-re ...
- IdHTTPServer使用注意问题
如果在同一电脑上运行多个IdHTTPServer实例,IdHTTPServer使用时候,一定要注意“DefaultPort”属性,其实真正绑定端口是这个属性决定的,所以希望IdHTTPServer绑定 ...