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 相关文章推荐
jquery 延迟执行实例介绍
Aug 20 Javascript
JavaScript的setAttribute兼容性问题解决方法
Nov 11 Javascript
ie下$.getJSON出现问题的解决方法
Feb 12 Javascript
js实现瀑布流的三种方式比较
Jun 28 Javascript
JS动态插入并立即执行回调函数的方法
Apr 21 Javascript
jQuery事件用法详解
Oct 06 Javascript
jQuery之动画ajax事件(实例讲解)
Jul 18 jQuery
Angular.js中$resource高大上的数据交互详解
Jul 30 Javascript
vue中使用iview自定义验证关键词输入框问题及解决方法
Mar 26 Javascript
详解html-webpack-plugin插件(用法总结)
Sep 12 Javascript
Vue中用props给data赋初始值遇到的问题解决
Nov 27 Javascript
jQuery是用来干什么的 jquery其实就是一个js框架
Feb 04 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 header()函数使用详细(301、404等错误设置)
2013/04/17 PHP
ThinkPHP CURD方法之field方法详解
2014/06/18 PHP
javascript 硬盘序列号+其它硬件信息
2008/12/23 Javascript
基于jquery实现的鼠标滑过按钮改变背景图片
2011/07/15 Javascript
javascript 随机展示头像实现代码
2011/12/06 Javascript
JQuery的read函数与js的onload不同方式实现
2013/03/18 Javascript
基于jQuery实现下拉框
2014/11/24 Javascript
jQuery实现友好的轮播图片特效
2015/01/12 Javascript
jQuery-1.9.1源码分析系列(十一)DOM操作续之克隆节点
2015/12/01 Javascript
浅谈JS的基础类型与引用类型
2016/09/13 Javascript
jQuey将序列化对象在前台显示地实现代码(方法总结)
2016/12/13 Javascript
Bootstrap BootstrapDialog使用详解
2017/02/17 Javascript
JavaScript动态加载重复绑定问题
2018/04/01 Javascript
微信小程序身份证验证方法实现详解
2019/06/28 Javascript
微信小程序仿今日头条导航栏滚动解析
2019/08/20 Javascript
vue prop传值类型检验方式
2020/07/30 Javascript
深入分析在Python模块顶层运行的代码引起的一个Bug
2014/07/04 Python
python实现飞机大战微信小游戏
2020/03/21 Python
对Python3使运行暂停的方法详解
2019/02/18 Python
python3.7 利用函数os pandas利用excel对文件名进行归类
2019/09/29 Python
pytorch点乘与叉乘示例讲解
2019/12/27 Python
Python栈的实现方法示例【列表、单链表】
2020/02/22 Python
flask开启多线程的具体方法
2020/08/02 Python
Python虚拟环境的创建和使用详解
2020/09/07 Python
Python实现手势识别
2020/10/21 Python
HTML5的表单(绝对特别强大的功能)使用示例
2013/06/20 HTML / CSS
意大利自行车商店:Cingolani Bike Shop
2019/09/03 全球购物
结构工程个人自荐信范文
2013/11/30 职场文书
办公室助理岗位职责
2013/12/25 职场文书
还款承诺书范文
2014/05/20 职场文书
入党积极分子学习党的纲领思想汇报
2014/09/13 职场文书
普通党员个人对照检查材料
2014/09/18 职场文书
一般党员对照检查材料
2014/09/24 职场文书
pytorch--之halfTensor的使用详解
2021/05/24 Python
学会Python数据可视化必须尝试这7个库
2021/06/16 Python
JavaScript数组 几个常用方法总结
2021/11/11 Javascript