angular的指令独立作用域(以及$watch的使用)
在编写指令的时候,会有一个独立作用域的问题(scope),他默认的是
scope:false
不创建自己的作用域,直接使用的就是父级的作用域,
问题:容易出现全局的污染,是的指令的重复性使用回出现一些问题。
scope:true
创建指令自己的独立作用域,继承父级的作用域,可以解决上面的问题
scope:{
//&,=,@
name:'='
}
这种写法就使得指令与外界的作用域相互分割,只能通过&,=,@,进行数据的相互传递,
下面细数一些在ng中自己会创建独立作用域的指令(但是ta们都是继承父级的作用域的,因此你可以使用$parent,关键时刻)
ng-include、ng-switch、ng-repeat、ng-controller、ng-view
关于ng-repeat的独立作用域问题尤其常见
demo:
$scope.myArr = [11,12];
$scope.$watch('myArr',function(newVal,oldVal){
console.log(newVal);
});
<ul>
<li ng-repeat= "num in myArr">
<input type="text" ng-model="num"/>
<span ng-bind="num"></span>
</li>
</ul>
发现我们在改变值的时候,并不会触发$watch
$scope.myObj = [{name:11},{name:12}];
$scope.$watch('myObj',function(newVal,oldVal){
console.log(newVal);
});
<ul>
<li ng-repeat= "nam in myObj">
<input type="text" ng-model="nam"/>
<span ng-bind="nam"></span>
</li>
</ul>
发现这里也不会触发$watch
进一步查证发现,$watch如果在监听一个对象的时候,他默认只会检测对象的引用是否改变,我们需要加上第三个参数,他就会监听对象的值的变年
$scope.$watch('myObj',function(newVal,oldVal){
console.log(newVal);
},true);
http://www.cnblogs.com/evaling/tag/angularJS/
angular的指令独立作用域(以及$watch的使用)的更多相关文章
- angular js 指令的数据传递 及作用域数据绑定
<div my-directive my-url="http://google.com" my-link-text="Click me to go to Googl ...
- 【AngularJS】—— 12 独立作用域
前面通过视频学习了解了指令的概念,这里学习一下指令中的作用域的相关内容. 通过独立作用域的不同绑定,可以实现更具适应性的自定义标签.借由不同的绑定规则绑定属性,从而定义出符合更多应用场景的标签. 本篇 ...
- Angular之指令Directive系列
项目筹备近期开启Angular学习,指令比较难理解所以记录备案,推荐Angualr实战学习视频大漠穷秋 Angular实战 一.指令directive概述 指令可以对元素绑定事件监听或者改变DOM结构 ...
- Angular自定义指令(directive)
angular自定义指令,意我们可以通过angula自己定义指令,来实现我们的特殊要求,为所欲为,一支穿云箭,千军万马来相见 多少年的老规矩了,先看代码: <!DOCTYPE html> ...
- angular分页指令
目前的多个项目中都用到分页这个功能,为了提高可复用性,我特地分离出来写了个分页的指令.直接贴代码,详情如下: index.html <body id="sBill" ng-c ...
- angular 自定义指令详解 Directive
在angular中,Directive,自定义指令的学习,可以更好的理解angular指令的原理,当angular的指令不能满足你的需求的时候,嘿嘿,你就可以来看看这篇文章,自定义自己的指令,可以满足 ...
- angular.js 中的作用域 数据模型 控制器
1.angular.js 作为后起之秀的前端mvc框架,他于传统的前端框架都不同,我们再也不需要在html中嵌入脚本来操作对象了.它抽象出了数据模型,控制器及视图. 成功解耦了应用逻辑,数据模型,视图 ...
- angular directive指令相互独立
想要让指令的使用相互间不干扰,如下:
- angular自定义指令-directive
Directive究竟是个怎么样的一个东西呢?我个人的理解是这样的:将一段html.js封装在一起,形成一个可复用的独立个体,具体特定的功能.下面我们来详细解读一下Directive的一般性用法. v ...
随机推荐
- Gruntjs提高生产力(一)
gruntjs是一个基于nodejs的自动化工具,只要熟悉nodejs或者又一定js经验就可以熟练应用. 1. 安装 a. 保证已安装了nodejs,并带有npm b.安装客户端命令行工具,grunt ...
- 037——VUE中表单控件处理之表单修饰符:lazy/number/trim
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- hdu 1517 A Multiplication Game 段sg 博弈 难度:0
A Multiplication Game Time Limit: 5000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Ot ...
- expdp/impdp 详细参数解释
任意可以使用expdp/impdp的环境,都可以通过help=y看到帮助文档. 1.expdp参数说明 2.impdp参数说明 3.expdp参数说明(中文) 4.impdp参数说明(中文) expd ...
- lambda表达式 <二>
概念了解: 1.什么是匿名委托(匿名方法的简单介绍.为什么要用匿名方法) 2.匿名方法的[拉姆达表达式]方法定义 3.匿名方法的调用(匿名方法的参数传递.使用过程中需要注意什么) 什么是匿名方法? 匿 ...
- CF 916
题解: 首先看题目 A题看不懂... 花了5分钟才做出来 还wa了 B题 一看好像是堆+位运算? 然后A了样例 C题 wa了好激发 似乎加边加错了 然后看D,似乎是可持久化平衡树? 我又不会... E ...
- HDU 5875 Function (线段树+gcd / 单调栈)
题意:给你一串数a再给你一些区间(lef,rig),求出a[lef]%a[lef+1]...%a[rig] 题解:我们可以发现数字a对数字b取模时:如果a<b,则等于原数,否则a会变小至少一半. ...
- 网页宽高clientWidth clientHeight获得数值不对的问题
当网页内容撑不满一屏时,通过以下代码获得整个网页高度会有问题 document.body.clientHeight;document.body.clientWidth; 得到的宽高不对,可能是因为ht ...
- Python3 数字Number(六)
Python 数字数据类型用于存储数值. 数据类型是不允许改变的,这就意味着如果改变数字数据类型得值,将重新分配内存空间. 以下实例在变量赋值时 Number 对象将被创建: var1 = 1 var ...
- week10《java程序设计》作业总结
week10<java程序设计>作业总结 1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结异常相关内容. 答:: 2. 书面作业 本次PTA作业题集异常 1. 常用异常 ...