如何理解angular自定义指令directive的scope属性？

1.背景介绍

directive( )方法可以接受两个参数：

1. name（字符串）指令的名字，用来在视图中引用特定的指令。

2. factory_function（函数）这个函数返回一个对象，其中定义了指令的全部行为。 $compile服务利用这个方法返回的对象，在DOM调用指令时来构造指令的行为。

angular.application('myApp', [])

.directive('myDirective', function() {

//一个指令定义对象

return {

//通过设置项来定义指令，在这里进行覆写

};

});

为了避免与未来的HTML标准冲突，给自定义的指令加入前缀来代表自定义的命名空间。AngularJS本身已经使用了 ng-前缀，所以可以选择除此以外的名字。在例子中我们使用 my-前缀（比如 my-derictive）。当模板在上面代码中返回时，你可以把以下的属性列表应用于指令定义返回的对象

restrict（字符串）

restrict是一个可选的参数。它告诉AngularJS这个指令在DOM中可以何种形式被声明。默认AngularJS认为 restrict的值是 A，即以属性的形式来进行声明。

可选值如下：

restrict值可以是以下几种:

E作为元素名使用

A作为属性使用

C作为类名使用

M作为注释使用

template（字符串或函数）

template参数是可选的，必须被设置为以下两种形式之一：

 一个可以接受两个参数的函数，参数为 tElement和 tAttrs，并返回一个代表模板的字符

串。

templateUrl（字符串或函数）。templateUrl是可选的参数，可以是以下类型：

 一个代表外部HTML文件路径的字符串；

指令中的scope

directive默认能共享父 scope中定义的属性，例如在模版中直接使用父 scope中的对象和属性。

通常使用这种直接共享的方式可以实现一些简单的 directive功能。但是当要创建一个可以重复使用的directive的时候，

就不能依赖于父scope了，因为在不同的地方使用directive对应的父scope不一样。所以需要一个隔离的scope，我们可以向

下面这样来定义我们的scope。

scope = false

在指令模板中可以直接使用父作用域中的变量，函数。指令继承了父作用域的一切属性和方法，这也使得在指令的模板中我们可以使用这些属性和方法。

将scope设置为false的时候,我们创建的指令和父作用域（其实是同一个作用域）共享同一个model模型，所以在指令中修改模型数据，它会反映到父作用域的模型中

scope = true

当把scope属性设置为true时，表明我们创建的指令要创建一个新的作用域，这个作用域是继承了父作用域。

scope = {}

指令将创建完全独立的作用域，当我们将scope设置为{}时，意味着我们创建的一个新的与父作用域隔离的新的作用域，这使我们在不知道外部环境的情况下，就可以正常工作，不依赖外部环境。指令的这个属性让AngularJS变得最强，它可以构建组建，无论放在哪里都是可以使用。

但是我们使用了隔离的作用域，不代表我们不可以使用父作用域的属性和方法。我们可以通过向scope的{}中传入特殊的前缀标识符（即prefix），来进行数据的绑定。

这是一个单项绑定的前缀标识符

使用方法：在元素中使用属性，好比这样 my-name="{{name}}"，注意，属性的名字要用-将两个单词连接，因为是数据的单项绑定所以要通过使用{{}}来绑定数据。

这是一个双向数据绑定前缀标识符

使用方法：在元素中使用属性，好比这样 my-age="age",注意，数据的双向绑定要通过=前缀标识符实现，所以不可以使用{{}}。

这是一个绑定函数方法的前缀标识符

使用方法：在元素中使用属性，好比这样 my-change="changeAge()"，注意，属性的名字要用-将多个个单词连接。

指令中的 controller , compile , link函数

AngularJs的生命周期;分为两个阶段:

第一个阶段是编译阶段:

在编译阶段，AngularJS会遍历整个HTML文档并根据JavaScript中的指令定义来处理页面上声明的指令。每一个指令的模板中都可能含

有另外一个指令，另外一个指令也可能会有自己的模板。当AngularJS调用HTML文档根部的指令时，会遍历其中所有的模板，模板中也可能包

含带有模板的指令.一旦对指令和其中的子模板进行遍历或编译，编译后的模板会返回一个叫做模板函数的函数。我们有机会在指令的模板函

数被返回前，对编译后的DOM树进行修改。

第二个阶段是链接阶段:链接函数来将模板与作用域链接起来;负责设置事件监听器，监视数据变化和实时的操作DOM.链接函数是可选的。

如果定义了编译函数，它会返回链接函数，因此当两个函数都定义了时，编译函数会重载链接函数

指令的控制器和link函数可以进行互换。控制器主要是用来提供可在指令间复用的行为，但链接函数只能在当前内部指令中定义行为，

且无法在指令间复用.link函数可以将指令互相隔离开来，而controller则定义可复用的行为。

1、link和controller的区别：post级别最高几个函数同时存在name为post的name,也就是post最后执行。compile函数最先执行，然后是controller，接着是pre，最后是post。有compile时 link不执行。没有compile时，controller先执行，link后执行。

2、什么时候使用compile：　在编译的阶段，angularJs会遍历整个的文档并根据JavaScript中指令定义来处理页面上什么的指令。在遍历的过程中，有可能一层套着一层，一直延深处遍历。一但遍历和编译完毕就会返回一个叫做模板函数的函数。在这个函数没被返回（return）之前我们可以对编译后的DOM树进行修改。通常情况下，如果设置了compile函数，说明我们希望在指令和实时数据被放到DOM中之前进行DOM操作，在这个函数中进行诸如添加和删除节点等DOM操作是安全的。本质上，当我们设置了link选项，实际上是创建了一个postLink() 链接函数，以便compile() 函数可以定义链接函数。编译函数(compile)负责对模板DOM进行转换。链接函数(link)负责将作用域和DOM进行链接。

3、prlority:优先权，权重高的指令先执行