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实现一些导航条切换,显示隐藏的实例代码
Jun 08 Javascript
基于Jquery制作图片文字排版预览效果附源码下载
Nov 18 Javascript
学习Javascript面向对象编程之封装
Feb 23 Javascript
javascript实现数字倒计时特效
Mar 30 Javascript
基于JS实现导航条之调用网页助手小精灵的方法
Jun 17 Javascript
JavaScript中获取HTML元素值的三种方法
Jun 20 Javascript
Highcharts学习之数据列
Aug 03 Javascript
详解vue中组件参数
Jul 09 Javascript
浅析Vue 和微信小程序的区别、比较
Aug 03 Javascript
JS中判断字符串存在和非空的方法
Sep 12 Javascript
JavaScript常见事件处理程序实例总结
Jan 05 Javascript
一次微信小程序内地图的使用实战记录
Sep 09 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 程序授权验证开发思路
2009/07/09 PHP
PHP+Apache环境中如何隐藏Apache版本
2017/11/24 PHP
Laravel服务容器绑定的几种方法总结
2020/06/14 PHP
javascript 面向对象编程 function也是类
2009/09/17 Javascript
javascript instanceof 内部机制探析
2010/10/15 Javascript
Struts2的s:radio标签使用及用jquery添加change事件
2013/04/08 Javascript
javascript垃圾收集机制与内存泄漏详细解析
2013/11/11 Javascript
利用js读取动态网站从服务器端返回的数据
2014/02/10 Javascript
Jquery实现兼容各大浏览器的Enter回车切换输入焦点的方法
2014/09/01 Javascript
JavaScript实现数据类型的相互转换
2016/03/06 Javascript
js canvas实现擦除动画
2016/07/16 Javascript
整理关于Bootstrap过渡动画的慕课笔记
2017/03/29 Javascript
JS 设置Cookie 有效期 检测cookie
2017/06/15 Javascript
详解node单线程实现高并发原理与node异步I/O
2017/09/21 Javascript
canvas绘制爱心的几种方法总结(推荐)
2017/10/31 Javascript
vue router 配置路由的方法
2018/07/26 Javascript
JS window对象简单操作完整示例
2020/01/14 Javascript
ES6 Iterator遍历器原理,应用场景及相关常用知识拓展详解
2020/02/15 Javascript
JQuery省市联动效果实现过程详解
2020/05/08 jQuery
[36:20]KG vs SECRET 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/19 DOTA
Python类的定义、继承及类对象使用方法简明教程
2015/05/08 Python
Python实现HTTP协议下的文件下载方法总结
2016/04/20 Python
Python实现感知器模型、两层神经网络
2017/12/19 Python
python查看数据类型的方法
2019/10/12 Python
pytorch 常用线性函数详解
2020/01/15 Python
pytorch方法测试——激活函数(ReLU)详解
2020/01/15 Python
PyCharm 2020.1版安装破解注册码永久激活(激活到2089年)
2020/09/24 Python
python实现扫雷游戏的示例
2020/10/20 Python
Vuori官网:运动服装的终级表现
2021/01/27 全球购物
汽车电子与维修专业大学生求职信
2013/09/28 职场文书
美德好少年事迹材料
2014/01/19 职场文书
先进工作者获奖感言
2014/02/08 职场文书
2014年工程工作总结
2014/11/25 职场文书
2015年幼儿园班务工作总结
2015/05/12 职场文书
2015年学校消防安全工作总结
2015/10/14 职场文书
win11无法登录onedrive错误代码0x8004def7怎么办 ?
2022/04/05 数码科技