angularJs是google为简化web应用开发所研发出一套MVVM的前端开发框架，小明在学习过程中遇到最难一点就是其插件开发(或者说是指令)，这里通过一个简单Dialog对话框例子来简单讲一下angular 指令的几个重要知识点。
项目结构非常简单，一个css文件来控制dialog插件样式，一个js文件来写插件的逻辑和视图模板，另外外部调用插件的方法写在了demo里。
首先我们通过app.directive方式来声明插件名
比如：app.directive("angularDialog",function(){}) ,我们声明了一个叫angularDialog的指令。
我们将所有逻辑写到后面回调函数中。
这里我们看到了有个叫restrict属性，restrict 的取值可以有三种,A代表Attrribute,E表示element,C表示class,一般实际项目中我们只会使用A或E，即在html调用为<angular-dialog></angular-dialog>或
<div angular-dialog></div>
template作用是将视图模板渲染出来
link简单来说是当directive被angular 编译后，执行该方法，function中可以传三个参数scope（当前组件的作用域,element只当前的dom对象，此处为angular-dialog，attrs指当前指令所绑定attributes）,我们将指令内部的数据绑定和方法调用都写到link中。
scope属性是这里最难理解的
通过这个例子我们可以看到scope中有三个属性@,&,=,&最好理解，我们将外部方法绑定到插件内部，用&符号就可以了哇,这里我们外部有一个fun方法，通过&就能在指令内部去调用这个fun方法，@和=作用都是数据绑定，区别在于@是单向的，=是双向的，从这个例子中我们可以很清晰看出我们将标题和内容传递到模板中通过@方式即可，但是我们通过外部事件变更指令内部状态则必须使用=。
angularjs指令非常强大，这里只是讲了个皮毛，最后放上demo
https://github.com/minerchow/angularDialog
网友评论