Angular 作用域scope的具体使用


Posted in Javascript onDecember 11, 2017

Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带。

Scope 是一个对象,有可用的方法和属性。

Scope 可应用在视图和控制器上。

$rootScope

每个AngularJs应用默认有一个根作用域--$rootScope, 根作用域位于最顶层,作为其他作用域的父作用域,可作用于整个应用中。

$scope

scope(作用域)对应MVC模式的Model,是应用在HTML(视图)和JavaScript(控制器)之间的纽带,可应用在视图和控制器上。

scope是表达式执行的上下文,同时作用域也是一个对象,有可用的方法和属性。

一、变量的取值和赋值

<div ng-controller="parentCtrl">
 <span>{{number}}</span>
 <div ng-controller="childCtrl">
  <span>{{number}}</span>
  <button ng-click="number = number +1">增加</button>
 </div>
</div>

function parentCtrl($scope){
 $scope.number = 1;
}
function childCtrl($scope){ 
}

效果:

界面上显示了两个1,但当我们点击按钮之后,childCtrl作用域内的数据改变了,parentCtrl作用域内的数据没有改变

分析:

①childCtrl作用域继承了parentCtrl作用域(类似于JavaScript的原型链继承),所以childCtrl作用域可以访问到parentCtrl的内容。
②点击按钮后childCtrl作用域就会创建一个number基础类型变量,当childCtrl已有某个基础类型变量就不会访问原型链。

解决:

①可以使用$parent来指定上级作用域改变

<div ng-controller="parentCtrl">
  <span>{{number}}</span>
  <div ng-controller="childCtrl">
   <span>{{number}}</span>
   <button ng-click="$parent.number = number +1">增加</button>
  </div>
 </div>

②使用引用类型变量,内外层作用域均是data对象的引用,修改对象的属性,引用的还是同一个变量。

<div ng-controller="parentCtrl">
  <span>{{data.number}}</span>
  <div ng-controller="childCtrl">
   <span>{{data.number}}</span>
   <button ng-click="data.number = data.number +1">增加</button>
  </div>
 </div>
 
 function parentCtrl($scope){
  $scope.data.number = 123';
 }
 function childCtrl($scope){
  
 }

ng-if、ng-repeat、ng-switch、ng-include等指令也会产生新作用域

二、Directive中的作用域

.directive("myDirective", function () {
return {
 restrict: "AE",
 scope: {
  name: '@myName',
  age: '=',
  changeAge: '&changeMyAge'
 },
 replace: true,
 template: "<div class='my-directive'>" +
  "我的名字是:<span ng-bind='name'></span><br/>" +
  "我的年龄是:<span ng-bind='age'></span><br/>" +
  "在这里修改名字:<input type='text' ng-model='name'><br/>" +
  "<button ng-click='changeAge()'>修改年龄</button>" +
  " </div>"
}

①scope:false

当scope设置为false的时候,我们创建的指令和父作用域(其实是同一个作用域)共享同一个model模型,所以在指令中修改模型数据,它会反映到父作用域的模型中。

②scope:true

当scope设置为true的时候,我们就新创建了一个作用域,只不过这个作用域是继承的父作用域;可以这样理解,我们新创建的作用域是一个新的作用域,只不过在初始化的时候,用了父作用域的属性和方法去填充我们这个新的作用域。它和父作用域不是同一个作用域。

③scope:{}

@ 这是一个单项绑定的前缀标识符

<div my-directive my-name="{{name}}"></div>

属性的名字要用-将两个单词连接,因为是数据的单项绑定所以要通过使用{{}}来绑定数据。

= 这是一个双向数据绑定前缀标识符

<div my-directive age="age"></div>

数据的双向绑定要通过=前缀标识符实现,所以不可以使用{{}}。

& 这是一个绑定函数方法的前缀标识符

<div my-directive change-my-age="changeAge()"></div>

属性的名字要用-将多个个单词连接。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS 动态获取节点代码innerHTML分析 [IE,FF]
Nov 30 Javascript
基于jquery的inputlimiter 实现字数限制功能
May 30 Javascript
JavaScript 验证码的实例代码(附效果图)
Mar 22 Javascript
js播放wav文件(源码)
Apr 22 Javascript
解析JavaScript中的标签语句
Jun 19 Javascript
使用JS取得焦点(focus)元素代码
Mar 22 Javascript
javascript实现图片左右滚动效果【可自动滚动,有左右按钮】
Sep 19 Javascript
angularjs实现过滤并替换关键字小功能
Sep 19 Javascript
vue实现验证码按钮倒计时功能
Apr 10 Javascript
js replace替换字符串同时替换多个方法
Nov 27 Javascript
JavaScript this绑定过程深入详解
Dec 07 Javascript
js的对象与函数详解
Jan 21 Javascript
angularjs实现柱状图动态加载的示例
Dec 11 #Javascript
Vue响应式原理深入解析及注意事项
Dec 11 #Javascript
js时间戳与日期格式之间转换详解
Dec 11 #Javascript
js时间戳与日期格式之间相互转换
Dec 11 #Javascript
vue.js默认路由不加载linkActiveClass问题的解决方法
Dec 11 #Javascript
基于JavaScript 性能优化技巧心得(分享)
Dec 11 #Javascript
JavaScript时间戳与时间日期间相互转换
Dec 11 #Javascript
You might like
php数字游戏 计算24算法
2012/06/10 PHP
JS实现日期加减的方法
2013/11/29 Javascript
快速使用Bootstrap搭建传送带
2016/05/06 Javascript
JavaScript的ExtJS框架中表格的编写教程
2016/05/21 Javascript
js canvas实现简单的图像扩散效果
2020/06/28 Javascript
一步步教你利用Canvas对图片进行处理
2017/09/19 Javascript
node.js中路由,中间件,ge请求和post请求的参数详解
2017/12/26 Javascript
node下使用UglifyJS压缩合并JS文件的方法
2018/03/07 Javascript
在iFrame子页面里实现模态框的方法
2018/08/17 Javascript
浅谈vue引用静态资源需要注意的事项
2018/09/28 Javascript
在node中使用jwt签发与验证token的方法
2019/04/03 Javascript
如何使用Node.js爬取任意网页资源并输出PDF文件到本地
2019/06/17 Javascript
微信小程序之侧边栏滑动实现过程解析(附完整源码)
2019/08/23 Javascript
原生js实现html手机端城市列表索引选择城市
2020/06/24 Javascript
python Django模板的使用方法
2016/01/14 Python
Python中绑定与未绑定的类方法用法分析
2016/04/29 Python
浅谈python和C语言混编的几种方式(推荐)
2017/09/27 Python
解决Python print 输出文本显示 gbk 编码错误问题
2018/07/13 Python
关于Python3爬虫利器Appium的安装步骤
2020/07/29 Python
Expedia丹麦:全球领先的旅游网站
2018/03/18 全球购物
中国包裹转运寄送国际服务:Famiboat
2019/07/24 全球购物
安全协议书范本
2014/04/21 职场文书
科技工作者先进事迹
2014/08/16 职场文书
颂军魂爱军营演讲稿
2014/09/13 职场文书
教师师德考核自我评价
2014/09/13 职场文书
初婚未育证明样本
2014/10/24 职场文书
2014年财务科工作总结
2014/11/11 职场文书
不服劳动仲裁起诉书
2015/05/20 职场文书
莫言获奖感言(全文)
2015/07/31 职场文书
《金钱的魔力》教学反思
2016/02/20 职场文书
浅谈tf.train.Saver()与tf.train.import_meta_graph的要点
2021/05/26 Python
Python下opencv使用hough变换检测直线与圆
2021/06/18 Python
Java 实现限流器处理Rest接口请求详解流程
2021/11/02 Java/Android
《极主夫道》真人电影正式预告 定档6月3日上映
2022/04/05 日漫
Python基本知识点总结
2022/04/07 Python
Python Matplotlib绘制两个Y轴图像
2022/04/13 Python