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 相关文章推荐
javascript radio 联动效果
Mar 04 Javascript
JavaScript 加号(+)运算符号
Dec 06 Javascript
jQuery-ui中自动完成实现方法
Jun 10 Javascript
Javascript模拟加速运动与减速运动代码分享
Dec 11 Javascript
JQuery.validate在ie8下不支持的快速解决方法
May 18 Javascript
js 判断各种数据类型的简单方法(推荐)
Aug 29 Javascript
Angular懒加载机制刷新后无法回退的快速解决方法
Aug 30 Javascript
微信页面倒计时代码(解决safari不兼容date的问题)
Dec 13 Javascript
jQuery使用Layer弹出层插件闪退问题
Dec 22 Javascript
数组Array的排序sort方法
Feb 17 Javascript
mpvue微信小程序开发之实现一个弹幕评论
Nov 24 Javascript
JavaScript实现点击切换功能
Jan 27 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操作MongoDB GridFS 存储文件的详解
2013/06/20 PHP
thinkphp在模型中自动完成session赋值示例代码
2014/09/09 PHP
laravel实现查询最后执行的一条sql语句的方法
2019/10/09 PHP
PHP pthreads v3使用中的一些坑和注意点分析
2020/02/21 PHP
SWFObject Flash js调用类
2008/07/08 Javascript
javascript css在IE和Firefox中区别分析
2009/02/18 Javascript
JavaScript快速检测浏览器对CSS3特性的支持情况
2012/09/26 Javascript
window.open打开页面居中显示的示例代码
2013/12/27 Javascript
Windows系统下使用Sublime搭建nodejs环境
2015/04/13 NodeJs
jQuery Validate表单验证深入学习
2015/12/18 Javascript
Three.js获取鼠标点击的三维坐标示例代码
2017/03/24 Javascript
学习使用Bootstrap页面排版样式
2017/05/11 Javascript
JavaScript运动框架 解决速度正负取整问题(一)
2017/05/17 Javascript
浅谈vue-lazyload实现的详细过程
2017/08/22 Javascript
详解基于mpvue的小程序markdown适配解决方案
2018/05/08 Javascript
JS制作简易计算器的实例代码
2020/07/04 Javascript
浅谈vue中get请求解决传输数据是数组格式的问题
2020/08/03 Javascript
Vue优化:常见会导致内存泄漏问题及优化详解
2020/08/04 Javascript
微信小程序反编译的实现
2020/12/10 Javascript
vue+element实现动态加载表单
2020/12/13 Vue.js
javascript实现点击产生随机图形
2021/01/25 Javascript
用python找出那些被“标记”的照片
2017/04/20 Python
python微信公众号开发简单流程
2018/03/23 Python
Flask框架学习笔记之表单基础介绍与表单提交方式
2019/08/12 Python
python实现逆滤波与维纳滤波示例
2020/02/26 Python
基于python检查矩阵计算结果
2020/05/21 Python
解析python 类方法、对象方法、静态方法
2020/08/15 Python
Python urlopen()参数代码示例解析
2020/12/10 Python
详解HTML5布局和HTML5标签
2020/10/26 HTML / CSS
送餐员岗位职责范本
2014/02/21 职场文书
《最佳路径》教学反思
2014/04/13 职场文书
优秀德育工作者事迹材料
2014/05/07 职场文书
2014最新版群众路线四风整改措施
2014/09/24 职场文书
单位婚育证明范本
2014/11/21 职场文书
2015年教师个人业务工作总结
2015/10/23 职场文书
Python爬取科目四考试题库的方法实现
2021/03/30 Python