详解Angularjs 自定义指令中的数据绑定

有关自定义指令的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;//用于决定分页导航栏最多可显示几个数字 },