详解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: '@' // 从父级获取值后便只在本地作用域生效
}

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。

本文名称：详解Angularjs自定义指令中的数据绑定-创新互联
分享网址：http://scjbc.cn/article/dddcei.html