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

 
控制台：（同样获取数据）

加一张总图：