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.opener返回父页面的应用
Oct 24 Javascript
关于JavaScript中var声明变量作用域的推断
Dec 16 Javascript
ejs v9 javascript模板系统
Mar 21 Javascript
js中数组排序sort方法的原理分析
Nov 20 Javascript
javascript比较两个日期相差天数的方法
Jul 23 Javascript
Jquery使用小技巧汇总
Dec 29 Javascript
webpack3之loader全解析
Oct 26 Javascript
iView框架问题整理小结
Oct 16 Javascript
webpack优化的深入理解
Dec 10 Javascript
巧妙运用v-model实现父子组件传值的方法示例
Apr 07 Javascript
Javascript实现鼠标点击冒泡特效
Dec 24 Javascript
Vuex的热更替如何实现
Jun 05 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扩展php_curl.dll不加载的解决方法
2013/06/26 PHP
Php连接及读取和写入mysql数据库的常用代码
2014/08/11 PHP
php获取小程序码的实现代码(B类接口)
2020/06/13 PHP
纯JavaScript实现的完美渐变弹出层效果代码
2010/04/02 Javascript
extjs表格文本启用选择复制功能具体实现
2013/10/11 Javascript
jQuery学习笔记之 Ajax操作篇(二) - 数据传递
2014/06/23 Javascript
微信小程序 wx.request(object) API详解及实例代码
2016/09/30 Javascript
jQuery Easyui datagrid editor为combobox时指定数据源实例
2016/12/19 Javascript
简单实现AngularJS轮播图效果
2020/04/10 Javascript
jquery实现搜索框功能实例详解
2018/07/23 jQuery
element-ui使用导航栏跳转路由的用法详解
2018/08/22 Javascript
ES6知识点整理之模块化的应用详解
2019/04/15 Javascript
webpack中的模式(mode)使用详解
2020/02/20 Javascript
vue组件讲解(is属性的用法)模板标签替换操作
2020/09/04 Javascript
JavaScript实现下拉列表
2021/01/20 Javascript
Python中使用动态变量名的方法
2014/05/06 Python
Python制作Windows系统服务
2017/03/25 Python
windows下Python实现将pdf文件转化为png格式图片的方法
2017/07/21 Python
Django + Uwsgi + Nginx 实现生产环境部署的方法
2018/06/20 Python
Python http接口自动化测试框架实现方法示例
2018/12/06 Python
python矩阵的转置和逆转实例
2018/12/12 Python
基于python if 判断选择结构的实例详解
2019/05/06 Python
Django模板语言 Tags使用详解
2019/09/09 Python
python中的itertools的使用详解
2020/01/13 Python
python数据库操作mysql:pymysql、sqlalchemy常见用法详解
2020/03/30 Python
tensorflow使用freeze_graph.py将ckpt转为pb文件的方法
2020/04/22 Python
Python如何使用神经网络进行简单文本分类
2021/02/25 Python
纯CSS3实现带动画效果导航菜单无需js
2013/09/27 HTML / CSS
Cole Haan官方网站:美国时尚潮流品牌
2017/12/06 全球购物
戴尔英国翻新电脑和电子产品:Dell UK Refurbished Computers
2019/07/30 全球购物
VICHY薇姿俄罗斯官方网上商店:法国护肤品牌,火山温泉水
2019/11/22 全球购物
eDreams德国:南欧领先的在线旅游公司
2020/12/07 全球购物
关于清明节的演讲稿
2014/09/13 职场文书
2014党员整改措施思想汇报
2014/10/07 职场文书
创先争优个人总结
2015/03/04 职场文书
2019年学校消防安全责任书(2篇)
2019/10/09 职场文书