有关自定义指令的范围参数,网上很多文章都在讲这3种绑定方式实现的效果是什么,但几乎没有人讲到底怎么使用,本篇希望聊聊到底怎么用这个话题。
自定义指令,是<代码> Angularjs> 反应和<代码> Vue>
自定义指令在Angularjs项目中主要有两大用途:
<强> 1。封装指定组件的DOM操作
Angularjs期望的开发方式是将DOM的操作尽可能封装在自定义指令中,这样对于局部变量的操作会更容易加入到角自己的生命周期中。
<强> 2。组件化
Angularjs靠自定义指令实现组件化。诸如你在反应和Vue中看到的类似于,这样的自定义标签,或是父级子级传值所使用的道具,又或者是标记组件自身状态的状态,在Angularjs中全部都是通过自定义指令来实现的。
自定义指令在定义后,需要在html文件中编写,最常用的方式是将其书写为标签属性。当使用自定义指令时,常常需要将一个变量的值从控制器传递至指令中,此时需要在<代码> 属范围性中进行变量绑定设置,Angularjs提供了3种不同的绑定方式(实际上也可以直接传递真的),如下所示:
使用这样的方式,就可以,但我们默认了一个前提,那就是所有调用这个组件的人,都会浏览这个组件的源代码。这其实是很不方便的,换位思考一下,你使用Angularjs的时候,会先去源码里找一下对应的方法开头都定义了哪些变量,哪些可以修改吗?当然不会。
这个属性在不同的项目中都会需要赋值,但需要动态去修改的场景其实并不多,所以我们需要将接口暴露至更高的开发层级,供调用者直接赋值。
<强>使用@绑定
当使用@绑定后,我们实际上是面向调用者暴露了去设定重要参数的接口,使用起来更加方便。下面的写法让开发者使用这个组件时,可以在代码编写时方便地传入自己想要设定的值:
面向对象程序设计原则中有一个重要的原则,叫做开放封闭原则,它的意思是说,你在程序设计中所书写的代码,应该对扩展开放,对修改封闭。简单地说就是你所编写的代码成型以后,在后续的使用和功能扩展的时候,尽可能不需要再去改动代码,而只需要通过编写与扩展相关的代码即可。
此处就是从封闭转为开放的一个示例,虽然看起来很细的小,但可以很明确地表达这个原则。
<强> 2.2,绑定
<代码>,绑定>
<>强实际场景:
比如我们在制作一个表格和分页组件时,表格每一页只显示10条数据,分页是后台来完成的,那么每一次点击分页组件上的页码按钮时,我们都需要向后台发送ajax请求来获取新一页的数据,那么这个发送ajax请求的方法你会写在哪里呢?
<强>不使用,绑定
将方法写在控制器中
优势:这样做的好处是如果以后我们需要增加一个输入框来实现精确跳转到哪一页时,可以直接在模板中使用ng - <代码>改变=皊endAjax() ">
劣势:但这样做的话,如果想在自定义指令中就无法直接调用这个方法,常见的处理策略是在自定义指令中使用<代码>范围。$排放()>
