Angular指令中作用域(scope)详解
附言:先说下指令吧,指令在创建的的时候,自带作用域属性(scope),一般情况下为false, 会成为调用者的controller的子作用域;如果自己想独立出来,有另外两种选择,scope为true,或{}
Scope:false ;子作用域,继承父作用域的属性及方法(双向的)
Scope:true;独立作用域,创建新的继承父作用域(单向的)
Scope:{ };独立作用域(设置后会有关系)
1. 说下scope为true的情况
创建独立作用域(新作用域),单向继承父作用域属性方法,之后改变和父作用域无关
以accname变量为例:
Controller.Js
Directive.Js
Html (驼峰命名)
2. 再者scope为false的情况
此为默认值,表明不创建新作用域,一切继承父作用域,息息相关
以accname变量为例:
Controller.Js
Directive.Js
Html
视图:显然都在变化
3. 最后说下scope为{}的情况
这种情况下,scope的分布有空{}以及有值的{…..}
①. { }和true不一样,是隔离父作用域,创建新作用域,不继承,只看下视图吧
Directive.Js
②. {….}里面可以数据和方法单项和双向
Key为html中的驼峰命名(一般驼峰命名)
Scope:{
Key:‘@ ’,//单项数据绑定(有的以 key(可自定义):‘@key(驼峰)’,不建议这么写)
Key:‘= ’,//双向数据绑定
Fun:‘& ’//回调
}
Controller.Js (变量,对象,方法)
Directive.Js(单项@,双向=,方法回调&)
Html(元素属性上为驼峰命名,单项绑定要加双花括号{{}},双向无需加)
最后看下控制台输出:
4. 补充下,另外还有直接以attr属性方式(不需scope的作用域直接操作等价false)
(坏处:易污染全局)
Directive.Js
控制台:(同样获取数据)
加一张总图: