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 相关文章推荐
用CSS+JS实现的进度条效果效果
Jun 05 Javascript
基于jQuery实现的百度导航li拖放排列效果,即时更新数据库
Jul 31 Javascript
jsonp原理及使用
Oct 28 Javascript
用javascript对一个json数组深度赋值示例
Jul 27 Javascript
非常漂亮的相册集 使用jquery制作相册集
Apr 28 Javascript
把json格式的字符串转换成javascript对象或数组的方法总结
Nov 03 Javascript
Bootstrap免费字体和图标网站(值得收藏)
Mar 16 Javascript
如何将 jQuery 从你的 Bootstrap 项目中移除(取而代之使用Vue.js)
Jul 17 jQuery
详解如何给React-Router添加路由页面切换时的过渡动画
Apr 25 Javascript
vue自动化路由的实现代码
Sep 30 Javascript
uni-app微信小程序登录授权的实现
May 22 Javascript
React实现评论的添加和删除
Oct 20 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代码
2008/04/09 PHP
基于PHP开发中的安全防范知识详解
2013/06/06 PHP
CMSPRESS 10行代码搞定 PHP无限级分类2
2018/03/30 PHP
jquery 必填项判断表单是否为空的方法
2008/09/14 Javascript
JS关键字变色实现思路及代码
2013/02/21 Javascript
JS将数字转换成三位逗号分隔的样式(示例代码)
2014/02/19 Javascript
DOM基础教程之使用DOM控制表单
2015/01/20 Javascript
Windows 系统下设置Nodejs NPM全局路径
2016/04/26 NodeJs
RequireJS多页面应用实例分析
2016/06/29 Javascript
基于HTML+CSS+JS实现增加删除修改tab导航特效代码
2016/08/05 Javascript
AngularJS指令与指令之间的交互功能示例
2016/12/14 Javascript
原生JS实现自定义滚动条效果
2020/10/27 Javascript
weebox弹出窗口不居中显示的解决方法
2017/11/27 Javascript
浅谈Three.js截图并下载的大坑
2019/11/01 Javascript
微信小程序单选框自定义赋值
2020/05/26 Javascript
解决VUE 在IE下出现ReferenceError: Promise未定义的问题
2020/11/07 Javascript
js实现简易计算器小功能
2020/11/18 Javascript
python3.5实现socket通讯示例(TCP)
2017/02/07 Python
Python如何发布程序的详细教程
2018/10/09 Python
pycharm: 恢复(reset) 误删文件的方法
2018/10/22 Python
python存储16bit和32bit图像的实例
2018/12/05 Python
python异步存储数据详解
2019/03/19 Python
Python实现自动访问网页的例子
2020/02/21 Python
python数据类型强制转换实例详解
2020/06/22 Python
详解css3中dispaly的Grid布局与Flex布局
2020/09/11 HTML / CSS
教育学专业实习生的自我鉴定
2013/11/26 职场文书
北京大学自荐信范文
2014/01/28 职场文书
项目总经理岗位职责
2014/02/14 职场文书
学校后勤岗位职责
2014/02/19 职场文书
汽车促销活动方案
2014/03/31 职场文书
奥运会口号
2014/06/13 职场文书
保研专家推荐信范文
2015/03/25 职场文书
2019年恭贺升学祝福语集锦
2019/08/15 职场文书
IDEA使用SpringAssistant插件创建SpringCloud项目
2021/06/23 Java/Android
我们认为中短波广播场强仪的最佳组合
2022/04/05 无线电
HttpClient实现表单提交上传文件
2022/08/14 Java/Android