深入理解AngularJS指令中的Scope，三种属性的不同点

一、概念说明

       可以是true、false、哈希对象{ }

       1.true

        新创建了一个作用域，且继承了父作用域；在初始化的时候，用了父作用域的属性和方法，去填充了我们这个新的作用域。它和父作用域不是同一个作用域。

       2.false默认（不指定时候）

       创建的指令和父作用域（其实是同一个作用域）共享同一个model模型，在指令中修改模型数据，会反映到父作用域的模型中。

       3.{ }

       新创建了一个作用域，不继承父作用域，表示一个独立的作用域isolated。

     

scope:
{
    name:'@',//结果就是test
    detail:'=',//结果要通过$scope.detail计算
    onUpdate:'&' //绑定一个事件
}

二、例子

       1.scope:false(或不写即为默认false) 

        不产生新作用域，指令的作用域和父作用域是同一个对象

   运行结果：

   分析：一个输入改变，四个位置的内容一起改变；

   作用域分析：ng-app产生rootScope，ng-controller指令产生一个作用域scope，两个指令myDirective，由于scope:false(或不写即默认false)，指令的作用域和父作用域是同一个对象。一共4个作用域。

   所以，name在一个地方变了，就所有地方变。

   2.scope:true

      产生新作用域，而且继承父作用域属性和方法。两个指令作用域互相对立，而且都继承父作用域(ng-controller产生)。

   运行结果：

    两行数据的变化，即每个指令作用域互相独立，且继承父作用域。

     3.scope:{ }

     产生独立新作用域，而且父作用域无关。

   运行结果，刚开始运行，都是空的，因为，没有继承父作用域的name。

  输入一个输入框后，只跟指令内的作用域同步

  输入另一个，两个指令间不互相影响

  4.{ }中的@ 

    字符串绑定，即，把内容直接当做字符串输出，但是{ {str2}}()，还是会解析成字符串再输出。

    运行结果：

  第一个和第三个都是字符串原样输出，第二个会解析后输出。

 5.{ }中=

    变量绑定

    
    
    
    


    

        ctrl:

        directive:
    
    
    

 

解析过程：

（1）在控制器MyController对应的div中，定义了一个变量ng-model--testname;

  (2)  testname对应的是输入框输入的值；

（3）然后，把这个变量当作一个参数传递给my-directive这个标签的name属性；

  (4)  在my-directive标签中，又把这个name绑定到模板中的一个输入框内；

  最终，两个输入框的内容被连接起来，无论改变哪一个输入框的值，testname与name都会发生改变。即通过my-directive标签内的属性依赖关系把testname与name连接在一起。

6.{ }中的&

方法绑定，当做方法执行，sayHello,sayNo,参数动态绑定到输入框。

   

   通过say在scope中的定义,angular知道了say对应的是个方法；

   通过{name:username}的关联，知道了传入的是username。

参考博客：

AngularJs指令中的Scope属性   https://www.cnblogs.com/shawnhu/p/8476801.html#top