有关自定义指令的scope参数，网上很多文章都在讲这3种绑定方式实现的效果是什么，但几乎没有人讲到底怎么使用，本篇希望聊聊 到底怎么用 这个话题。
一. 自定义指令
自定义指令，是 Angularjs 用来实现组件化的方式，相比于 React 和 Vue 的组件化方式，它真的很复杂，自定义指令太重了，它暴露了太多可供定制的参数，以至于普通的开发者完全不知道要用它来做什么而将其束之高阁，毕竟一般的业务逻辑通过controller和service就已经可以完成了。
自定义指令在 Angularjs 项目中主要有两大用途：
1.封装指定组件的DOM操作
Angularjs 期望的开发方式是将DOM的操作尽可能封装在自定义指令中，这样对于局部变量的操作会更容易加入到Angular自己的生命周期中。
2.组件化
Angularjs 靠自定义指令实现组件化。诸如你在 React 和 Vue 中看到的类似于 , 这样的自定义标签，或是父级子级传值所使用的 prop ，又或者是标记组件自身状态的 state ，在 Angularjs 中全部都是通过自定义指令来实现的。
二. 数据绑定的形式
自定义指令在定义后，需要在html文件中编写，最常用的方式是将其书写为 标签属性。 当使用自定义指令时，常常需要将一个变量的值从controller传递至directive中，此时需要在 scope 属性中进行变量绑定设置， Angularjs 提供了3种不同的绑定方式（实际上也可以直接传递True），如下所示：
scope: { infiniteScroll: '=', // 将infiniteScroll同父级controller中的指定对象双向绑定 onSend: '&', // 从父级获取一个变量的引用，常用作方法调用 fromName: '@' // 从父级获取值后便只在本地作用域生效 }
关于三种绑定方式使用的方法，网上可以搜到非常多的文章，本篇不再赘述，今天我们只来详细看一下这几种方式的使用场景和区别。
2.1 @绑定
@绑定 可以转移常量赋值的位置，常用于为自定义封装组件暴露一个可设定常量参数的接口。 这种绑定方式的意义，在于从自定义指令外部（一般是从html页面上绑定一个常量或控制器中的变量）获取一个局部变量的值。
实际场景：
例如我们封装了一个分页组件，其中指令局部作用域中的 displayPaginationNums 属性用于决定分页组件的页码栏显示多少个按钮，然后把剩余的按钮收起来并添加 ... 按钮，这是一个很常见的需求。
不使用@绑定
不使用@绑定，完全可以做到，只需要在link函数里，初始化为其赋值即可。
link:function(scope, elements, attrs){ scope.displayPaginationNums = 5;//用于决定分页导航栏最多可显示几个数字 },
使用这样的方式，就可以，但我们默认了一个前提，那就是 所有调用这个组件的人，都会浏览这个组件的源代码 。这其实是很不方便的，换位思考一下，你使用 Angularjs 的时候，会先去源码里找一下对应的方法开头都定义了哪些变量，哪些可以修改吗？当然不会。
这个属性在不同的项目中都会需要赋值，但需要动态去修改的场景其实并不多，所以我们需要将接口暴露至更高的开发层级，供调用者直接赋值。
使用@绑定
当使用@绑定后，我们实际上是面向调用者暴露了去设定重要参数的接口，使用起来更加方便。下面的写法让开发者使用这个组件时，可以在代码编写时方便地传入自己想要设定的值：
//指令定义时 scope:{ displayPaginationNums:'@' },
<!--指令调用时--> <div table-pagination display-pagination-nums="5">
面向对象程序设计原则中有一个重要的原则，叫做 开放封闭原则 ，它的意思是说，你在程序设计中所书写的代码， 应该对扩展开放，对修改封闭 。简单地说就是你所编写的代码成型以后，在后续的使用和功能扩展的时候，尽可能不需要再去改动代码，而只需要通过 编写与扩展相关的代码 即可。
此处就是 从封闭转为开放 的一个示例，虽然看起来很细小，但可以很明确地表达这个原则。
2.2 &绑定
&绑定 用于传递父级函数的引用，用来调用父级控制器中定义的方法。 如果只是以业务逻辑为模块进行封装，这种绑定方式可以帮我们避免一部分代码重复，如果是为通用框架编写纯组件，则可以为调用者提供自定义函数的接口。
实际场景：
比如我们在制作一个表格和分页组件时，表格每一页只显示10条数据，分页是后台来完成的，那么每一次点击分页组件上的页码按钮时，我们都需要向后台发送ajax请求来获取新一页的数据。那么这个发送ajax请求的方法你会写在哪里呢？
不使用&绑定
将方法写在controller中