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 相关文章推荐
Jquery Ajax学习实例3 向WebService发出请求,调用方法返回数据
Mar 16 Javascript
JS设置获取cookies的方法
Jan 26 Javascript
javascript中DOM复选框选择用法实例
May 14 Javascript
javascript原型模式用法实例详解
Jun 04 Javascript
js原生跨域_用script标签的简单实现
Sep 24 Javascript
jQuery日程管理插件fullcalendar使用详解
Jan 07 Javascript
JavaScript实现星级评分
Jan 12 Javascript
详解vue表单验证组件 v-verify-plugin
Apr 19 Javascript
ES6中的class是如何实现的(附Babel编译的ES5代码详解)
May 17 Javascript
基于Vue 撸一个指令实现拖拽功能
Oct 09 Javascript
vue组件创建的三种方式小结
Feb 03 Javascript
利用JS判断元素是否为数组的方法示例
Jan 08 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
重置版战役片段
2020/04/09 魔兽争霸
很让人受教的 提高php代码质量36计
2012/09/05 PHP
PHP加密解密类实例分析
2015/04/20 PHP
android上传图片到PHP的过程详解
2015/08/03 PHP
PHP实现文件上传和多文件上传
2015/12/24 PHP
PHP中调用C/C++制作的动态链接库的教程
2016/03/10 PHP
PHP基于DOM创建xml文档的方法示例
2017/02/08 PHP
完美解决php 导出excle的.csv格式的数据时乱码问题
2017/02/18 PHP
PHP中phar包的使用教程
2017/06/14 PHP
PHP基于自定义类随机生成姓名的方法示例
2017/08/05 PHP
基于laravel Request的所有方法详解
2019/09/29 PHP
Laravel5.1 框架Middleware中间件基本用法实例分析
2020/01/04 PHP
10款新鲜出炉的 jQuery 插件(Ajax 插件,有幻灯片、图片画廊、菜单等)
2011/06/08 Javascript
javascript中var的重要性分析
2015/02/11 Javascript
jQuery打字效果实现方法(附demo源码下载)
2015/12/18 Javascript
JavaScript将base64图片转换成formData并通过AJAX提交的实现方法
2016/10/24 Javascript
20个最常见的jQuery面试问题及答案
2018/05/23 jQuery
Vuex,iView UI面包屑导航使用扩展详解
2019/11/04 Javascript
Vue修改项目启动端口号方法
2019/11/07 Javascript
浅谈vue中get请求解决传输数据是数组格式的问题
2020/08/03 Javascript
[01:00:52]2018DOTA2亚洲邀请赛 4.4 淘汰赛 EG vs LGD 第一场
2018/04/05 DOTA
Python常用内置模块之xml模块(详解)
2017/05/23 Python
Python实现快速计算词频功能示例
2018/06/25 Python
python实现flappy bird小游戏
2018/12/24 Python
基于Python对数据shape的常见操作详解
2018/12/25 Python
Python netmiko模块的使用
2020/02/14 Python
Python3标准库之dbm UNIX键-值数据库问题
2020/03/24 Python
基督教卡片、励志礼品、家居装饰等:DaySpring
2018/10/12 全球购物
小蚁科技官方商店:YI Technology
2019/08/23 全球购物
医学生自荐信
2013/12/03 职场文书
银行职业规划书范文
2013/12/28 职场文书
幼儿园六一儿童节文艺汇演主持词
2014/03/21 职场文书
买卖合同协议书范本
2014/10/18 职场文书
奖励申请报告范文
2015/05/15 职场文书
Python pandas读取CSV文件的注意事项(适合新手)
2021/06/20 Python
IDEA2021.2配置docker如何将springboot项目打成镜像一键发布部署
2021/09/25 Java/Android