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 相关文章推荐
js中的window.open返回object的错误的解决方法
Aug 15 Javascript
JavaScript高级程序设计 事件学习笔记
Sep 10 Javascript
JavaScript面向对象设计二 构造函数模式
Dec 20 Javascript
js去除浏览器默认底图的方法
Jun 08 Javascript
原生js实现对Ajax的封装(仿jquery)
Jan 22 Javascript
vue学习教程之带你一步步详细解析vue-cli
Dec 26 Javascript
利用Vue构造器创建Form组件的通用解决方法
Dec 03 Javascript
使用flow来规范javascript的变量类型
Sep 12 Javascript
详解JS函数防抖
Jun 05 Javascript
JS猜数字游戏实例讲解
Jun 30 Javascript
js利用拖放实现添加删除
Aug 27 Javascript
JavaScript实现网页跨年倒计时
Dec 02 Javascript
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中设置多级目录session的问题
2011/08/08 PHP
Codeigniter框架实现获取分页数据和总条数的方法
2014/12/05 PHP
PHP对象克隆clone用法示例
2016/09/28 PHP
CI框架表单验证实例详解
2016/11/21 PHP
javascript中的有名函数和无名函数
2007/10/17 Javascript
基于jquery的一个拖拽到指定区域内的效果
2011/09/21 Javascript
jQuery实现页面滚动时层智能浮动定位实例探讨
2013/03/29 Javascript
高性能JavaScript DOM编程(1)
2015/08/11 Javascript
原生JS实现风箱式demo,并封装了一个运动框架(实例代码)
2016/07/22 Javascript
微信js-sdk分享功能接口常用逻辑封装示例
2016/10/13 Javascript
浅谈React 属性和状态的一些总结
2016/11/21 Javascript
Bootstrap风格的WPF样式
2016/12/07 Javascript
原生js实现焦点轮播图效果
2017/01/12 Javascript
基于bootstrap实现多个下拉框同时搜索功能
2017/07/19 Javascript
js实现时间日期校验
2020/05/26 Javascript
如何手写一个简易的 Vuex
2020/10/10 Javascript
微信小程序实现文件预览
2020/10/22 Javascript
Python实现端口复用实例代码
2014/07/03 Python
python和bash统计CPU利用率的方法
2015/07/10 Python
Python黑魔法@property装饰器的使用技巧解析
2016/06/16 Python
Python实现爬取亚马逊数据并打印出Excel文件操作示例
2019/05/16 Python
python pickle存储、读取大数据量列表、字典数据的方法
2019/07/07 Python
python 遍历pd.Series的index和value
2019/11/26 Python
解决Keras 与 Tensorflow 版本之间的兼容性问题
2020/02/07 Python
Python3 操作 MySQL 插入一条数据并返回主键 id的实例
2020/03/02 Python
Django使用list对单个或者多个字段求values值实例
2020/03/31 Python
Python用SSH连接到网络设备
2021/02/18 Python
常用的HTML5列表标签
2017/06/20 HTML / CSS
Clarisonic美国官网:科莱丽声波洁面仪
2017/10/12 全球购物
日本订房网站,预订日本星级酒店/温泉旅馆:Relux(支持中文)
2020/01/03 全球购物
员工工作表现评语
2014/04/26 职场文书
期末评语大全
2014/05/04 职场文书
无子女夫妻离婚协议书(4篇)
2014/10/20 职场文书
一年级语文上册复习计划
2015/01/17 职场文书
python中的sys模块和os模块
2022/03/20 Python
代码复现python目标检测yolo3详解预测
2022/05/06 Python