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编程起步(第七课)
Feb 27 Javascript
JavaScript入门教程(1) 什么是JS
Jan 31 Javascript
js 效率组装字符串 StringBuffer
Dec 23 Javascript
js function使用心得
May 10 Javascript
jQuery1.6 使用方法二
Nov 23 Javascript
javascript生成随机大小写字母的方法
Feb 20 Javascript
javascript 控制input只允许输入的各种指定内容
Jun 19 Javascript
javascript:void(0)点击登录没反应怎么解决
Nov 13 Javascript
BootStrap中Table分页插件使用详解
Oct 09 Javascript
Vue.js计算属性computed与watch(5)
Dec 09 Javascript
详解Vue的常用指令v-if, v-for, v-show,v-else, v-bind, v-on
Oct 12 Javascript
js实现随机点名
Jan 19 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
一个简单的自动发送邮件系统(二)
2006/10/09 PHP
收集的二十一个实用便利的PHP函数代码
2010/04/22 PHP
PHP filter_var() 函数 Filter 函数
2012/04/25 PHP
深入file_get_contents函数抓取内容失败的原因分析
2013/06/25 PHP
PHP常用字符串操作函数实例总结(trim、nl2br、addcslashes、uudecode、md5等)
2016/01/09 PHP
ThinkPHP框架里隐藏index.php
2016/04/12 PHP
详解Laravel视图间共享数据与视图Composer
2016/08/04 PHP
Laravel 验证码认证学习记录小结
2019/12/20 PHP
获取Javscript执行函数名称的方法
2006/12/22 Javascript
jQuery使用手册之二 DOM操作
2007/03/24 Javascript
js getBoundingClientRect() 来获取页面元素的位置
2010/11/25 Javascript
javascript通过navigator.userAgent识别各种浏览器
2013/10/25 Javascript
jquery改变tr背景色的示例代码
2013/12/28 Javascript
Js操作DOM元素及获取浏览器高宽的简单方法
2016/09/08 Javascript
JSP防止网页刷新重复提交数据的几种方法
2016/11/19 Javascript
bootstrap如何让dropdown menu按钮式下拉框长度一致
2017/04/10 Javascript
Chrome调试折腾记之JS断点调试技巧
2017/09/11 Javascript
vue.js开发实现全局调用的MessageBox组件实例代码
2017/11/22 Javascript
JS实现非首屏图片延迟加载的示例
2018/01/06 Javascript
详解Vue单元测试Karma+Mocha学习笔记
2018/01/31 Javascript
Vue完整项目构建(进阶篇)
2018/02/10 Javascript
react中使用css的7中方式(最全总结)
2019/02/11 Javascript
Python 读写文件和file对象的方法(推荐)
2016/09/12 Python
Django中间件实现拦截器的方法
2018/06/01 Python
python-itchat 获取微信群用户信息的实例
2019/02/21 Python
python开发实例之Python的Twisted框架中Deferred对象的详细用法与实例
2020/03/19 Python
详解pandas赋值失败问题解决
2020/11/29 Python
Tod’s英国官方网站:意大利奢华手工制作手袋和鞋履
2019/03/15 全球购物
shell程序中如何注释
2012/02/17 面试题
网络程序员自荐信
2014/01/25 职场文书
家长给孩子的评语
2014/01/30 职场文书
高校优秀辅导员事迹材料
2014/05/07 职场文书
乔丹名人堂演讲稿
2014/05/24 职场文书
洗手间标语
2014/06/23 职场文书
店铺转让协议书
2015/01/29 职场文书
聊聊Python String型列表求最值的问题
2022/01/18 Python