AnjularJS中$scope和$rootScope的区别小结


Posted in Javascript onSeptember 18, 2016

一句话总结:

     $rootScope针对全局的作用域生效

     $scope只针对当前的controller作用域生效

用下面的例子来证明上述的说法:

定义一个模块名为myApp

var myApp = angular.module('myApp', []);

创建oneController和twoController这两个controller

oneController传入$scope和$rootScope

myApp.controller('oneController', ['$scope', '$rootScope', function ($scope, $rootScope) {
 // 局部的变量,只有在oneController中才会显示
 $scope.one_language = 'Python';

 // 全局的变量,都可以调用
 $rootScope.language = 'Go';
}]);

twoController只传入$scope

myApp.controller('twoController', ['$scope', function ($scope) {
 // 局部的变量,只有在twoController中才会显示
 $scope.two_language = 'Java';
}]);

HTML标签内容

<span ng-app="myApp">
  <style>
    div{margin-top: 15px;border: 2px solid rebeccapurple;width: 400px;}
  </style>
  <div>
    <h3>我是全局变量language: {{ language}}</h3>
  </div>
  <div ng-controller="oneController">
    <h3>我是one_language局部变量: {{ one_language}}</h3>
  </div>
  <div ng-controller="twoController">
    <h1>twoController</h1>
    <h3>我是two_language局部变量: {{ two_language }}</h3>
    <h3>我是one_language局部变量: {{ one_language}}</h3>
    <h3>我是全局变量language: {{ language }}</h3>
  </div>
</span>

显示的结果

AnjularJS中$scope和$rootScope的区别小结

总结

以上就是这篇文章的全部内容,请仔细看看上面的代码,这有助于你理解。如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
使用SyntaxHighlighter实现HTML高亮显示代码的方法
Feb 04 Javascript
JavaScript Event学习补遗 addEventSimple
Feb 11 Javascript
JavaScript replace(rgExp,fn)正则替换的用法
Mar 04 Javascript
javascript 内存回收机制理解
Jan 17 Javascript
JavaScript DOM 学习总结(五)
Nov 24 Javascript
js+canvas绘制五角星的方法
Jan 28 Javascript
jQuery.Validate表单验证插件的使用示例详解
Jan 04 Javascript
js实现4个方向滚动的球
Mar 06 Javascript
mui上拉加载功能实例详解
Apr 13 Javascript
AngularJS常见过滤器用法实例总结
Jul 06 Javascript
vue获取元素宽、高、距离左边距离,右,上距离等还有XY坐标轴的方法
Sep 05 Javascript
jQuery访问json文件中数据的方法示例
Jan 28 jQuery
jQuery向父辈遍历的简单方法
Sep 18 #Javascript
js字符串引用的两种方式(必看)
Sep 18 #Javascript
jQuery实现获取元素索引值index的方法
Sep 18 #Javascript
浅谈js中的引用和复制(传值和传址)
Sep 18 #Javascript
jQuery实现鼠标经过时高亮,同时其他同级元素变暗的效果
Sep 18 #Javascript
JavaScript每天必学之事件
Sep 18 #Javascript
jQuery实现简单的网页换肤效果示例
Sep 18 #Javascript
You might like
php操作sqlserver关于时间日期读取的小小见解
2009/11/29 PHP
PHP获取MySql新增记录ID值的3种方法
2014/06/24 PHP
学习php设计模式 php实现策略模式(strategy)
2015/12/07 PHP
PHP 多进程与信号中断实现多任务常驻内存管理实例方法
2019/10/04 PHP
YII2框架中ActiveDataProvider与GridView的配合使用操作示例
2020/03/18 PHP
用dom+xhtml+css制作的一个相册效果代码打包下载
2008/01/24 Javascript
JQuery防止退格键网页后退的实现代码
2012/03/23 Javascript
JS弹出层单纯的绝对定位居中示例代码
2014/02/18 Javascript
JavaScript获取图片的原始尺寸以宽度为例
2014/05/04 Javascript
JS弹出可拖拽可关闭的div层完整实例
2015/02/13 Javascript
jQuery实现Div拖动+键盘控制综合效果的方法
2015/03/10 Javascript
跟我学习javascript的垃圾回收机制与内存管理
2015/11/23 Javascript
Jquery遍历select option和添加移除option的实现方法
2016/08/26 Javascript
JS常用知识点整理
2017/01/21 Javascript
js 函数式编程学习笔记
2017/03/25 Javascript
在Debian(Raspberry Pi)树莓派上安装NodeJS的教程详解
2017/09/19 NodeJs
django使用channels2.x实现实时通讯
2018/11/28 Javascript
vue 中几种传值方法(3种)
2019/11/12 Javascript
跟老齐学Python之数据类型总结
2014/09/24 Python
Python基于select实现的socket服务器
2016/04/13 Python
python快速建立超简单的web服务器的实现方法
2018/02/17 Python
解决安装tensorflow遇到无法卸载numpy 1.8.0rc1的问题
2018/06/13 Python
python为QT程序添加图标的方法详解
2020/03/09 Python
使用canvas压缩图片大小的方法示例
2019/08/02 HTML / CSS
AmazeUI 列表的实现示例
2020/08/17 HTML / CSS
The North Face北面美国官网:美国著名户外品牌
2018/09/15 全球购物
初中毕业生的自我评价
2014/03/03 职场文书
行政人事经理职位说明书
2014/03/05 职场文书
医疗纠纷协议书
2014/04/16 职场文书
教师先进工作者事迹材料
2014/05/01 职场文书
公司承诺函范文
2015/01/21 职场文书
苏州园林导游词
2015/02/03 职场文书
公司行政主管岗位职责
2015/04/09 职场文书
导游词之西安骊山
2019/12/03 职场文书
tensorflow中的数据类型dtype用法说明
2021/05/26 Python
shell进度条追踪指令执行时间的场景分析
2022/06/16 Servers