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 相关文章推荐
javascript延时重复执行函数 lLoopRun.js
Jun 29 Javascript
解读JavaScript中 For, While与递归的用法
May 07 Javascript
Javascript仿PHP $_GET获取URL中的参数
May 12 Javascript
基于jQuery实现二级下拉菜单效果
Feb 01 Javascript
微信小程序实现运动步数排行功能(可删除)
Jul 05 Javascript
快速解决bootstrap下拉菜单无法隐藏的问题
Aug 10 Javascript
Vue监听数据渲染DOM完以后执行某个函数详解
Sep 11 Javascript
详解原生JS回到顶部
Mar 25 Javascript
JS用最简单的方法实现四舍五入
Aug 27 Javascript
layui下拉列表select实现可输入查找的方法
Sep 28 Javascript
Vue实现点击当前元素以外的地方隐藏当前元素(实现思路)
Dec 04 Javascript
vue - props 声明数组和对象操作
Jul 30 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+mysql留言本源码
2009/11/11 PHP
PHPStrom中实用的功能和快捷键大全
2015/09/23 PHP
php 使用fopen函数创建、打开文件详解及实例代码
2016/09/24 PHP
CakePHP框架Model函数定义方法示例
2017/08/04 PHP
PHP设计模式之原型设计模式原理与用法分析
2018/04/25 PHP
[IE&amp;FireFox兼容]JS对select操作
2007/01/07 Javascript
如何实现动态删除javascript函数
2007/05/27 Javascript
javascript 设置文本框中焦点的位置
2009/11/20 Javascript
javascript XMLHttpRequest对象全面剖析
2010/04/24 Javascript
javascript学习笔记(八) js内置对象
2012/06/19 Javascript
js call方法详细介绍(js 的继承)
2013/11/18 Javascript
Jquery性能优化详解
2014/05/15 Javascript
JavaScript使用Range调色及透明度实例
2016/09/25 Javascript
浅谈JavaScript的函数及作用域
2016/12/30 Javascript
jQuery实现用户输入自动完成功能
2017/02/13 Javascript
JS原型与原型链的深入理解
2017/02/15 Javascript
微信小程序 flex实现导航实例详解
2017/04/26 Javascript
javaScript 逻辑运算符使用技巧整理
2017/05/03 Javascript
vue实现文章内容过长点击阅读全文功能的实例
2017/12/28 Javascript
vue-cli 为项目设置别名的方法
2019/10/15 Javascript
JS在Array数组中按指定位置删除或添加元素对象方法示例
2019/11/19 Javascript
vue中解决微信html5原生ios虚拟键返回不刷新问题
2020/10/20 Javascript
jquery实现穿梭框功能
2021/01/19 jQuery
[05:49]2014DOTA2TI4正赛第二日综述 昔日冠军纷纷落马 VG LGD占尽先机
2014/07/20 DOTA
python3学习笔记之多进程分布式小例子
2018/02/13 Python
Pycharm 创建 Django admin 用户名和密码的实例
2018/05/30 Python
python绘制直线的方法
2018/06/30 Python
Python加密模块的hashlib,hmac模块使用解析
2020/01/02 Python
Selenium元素定位的30种方式(史上最全)
2020/05/11 Python
Python实现播放和录制声音的功能
2020/08/12 Python
Python面向对象特殊属性及方法解析
2020/09/16 Python
python实现scrapy爬虫每天定时抓取数据的示例代码
2021/01/27 Python
学习优秀党务工作者先进事迹材料思想报告
2014/09/17 职场文书
一年级数学上册复习计划
2015/01/17 职场文书
2016全国“质量月”活动标语口号
2015/12/26 职场文书
js之ajax文件上传
2021/05/13 Javascript