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 相关文章推荐
改写一个简单的菜单 弹性大小
Dec 02 Javascript
使用jQuery清空file文件域的解决方案
Apr 12 Javascript
JS动态修改表格cellPadding和cellSpacing的方法
Mar 31 Javascript
jquery实现隐藏在左侧的弹性弹出菜单效果
Sep 18 Javascript
JS触摸事件、手势事件详解
May 04 Javascript
Vue上传组件vue Simple Uploader的用法示例
Aug 25 Javascript
VUEJS 2.0 子组件访问/调用父组件的实例
Feb 10 Javascript
vue的全局提示框组件实例代码
Feb 26 Javascript
使用proxy实现一个更优雅的vue【推荐】
Jun 19 Javascript
移动端H5页面返回并刷新页面(BFcache)的方法
Nov 06 Javascript
Vue 权限控制的两种方法(路由验证)
Aug 16 Javascript
JQuery实现ul中添加LI和删除指定的Li元素功能完整示例
Oct 16 jQuery
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中$_SERVER的详细参数与说明
2008/07/29 PHP
php中怎么搜索相关联数组键值及获取之
2013/10/17 PHP
使用PHP+MySql实现微信投票功能实例代码
2017/09/29 PHP
使用PHP开发留言板功能
2019/11/19 PHP
Javascript 调试利器 Firebug使用详解六
2009/07/05 Javascript
jquery ui dialog里调用datepicker的问题
2009/08/06 Javascript
jquery 表格分页等操作实现代码(pagedown,pageup)
2010/04/11 Javascript
Jquery Ajax请求代码(2)
2011/01/07 Javascript
基于jquery循环map功能的代码
2011/02/26 Javascript
获取div编辑框,textarea,input text的光标位置 兼容IE,FF和Chrome的方法介绍
2012/11/08 Javascript
js操纵跨frame的三级联动select下拉选项实例介绍
2013/05/19 Javascript
JavaScript动态改变表格单元格内容的方法
2015/03/30 Javascript
JavaScript实现跨浏览器的添加及删除事件绑定函数实例
2015/08/04 Javascript
ionic隐藏tabs的方法
2016/08/29 Javascript
JSON与XML的区别对比及案例应用
2016/11/11 Javascript
Vue.js路由组件vue-router使用方法详解
2016/12/02 Javascript
jQGrid Table操作列中点击【操作】按钮弹出按钮层的实现代码
2016/12/05 Javascript
详解Vue之父子组件传值
2019/04/01 Javascript
原生JS实现列表内容自动向上滚动效果
2019/05/22 Javascript
Python实例之wxpython中Frame使用方法
2014/06/09 Python
Python3.x爬虫下载网页图片的实例讲解
2018/05/22 Python
python 标准差计算的实现(std)
2019/07/29 Python
PYTHON发送邮件YAGMAIL的简单实现解析
2019/10/28 Python
导入tensorflow:ImportError: libcublas.so.9.0 报错
2020/01/06 Python
python将dict中的unicode打印成中文实例
2020/05/11 Python
python删除指定列或多列单个或多个内容实例
2020/06/28 Python
python学习笔记之多进程
2020/08/06 Python
施华洛世奇意大利官网:SWAROVSKI意大利
2018/07/23 全球购物
怎样写演讲稿
2014/01/04 职场文书
保护环境建议书
2014/03/12 职场文书
合伙经营协议书
2014/04/18 职场文书
旅游局领导班子“四风”问题对照检查材料思想汇报
2014/09/29 职场文书
十岁生日答谢词
2015/01/05 职场文书
离婚协议书怎么写
2015/01/26 职场文书
思想道德自我评价2015
2015/03/09 职场文书
2016年“节能宣传周”活动总结
2016/04/05 职场文书