发表于: 2017-06-03 22:16:08

3 1104


今天完成的事情:

    重新学习了angualr指令,之前的任务中一直没有用到自定义指令,本打算完成任务10后,重新学一波,但是在进行任务9的时候上传图片时在controller中操作了DOM,这是不符合angular规范的,就又回去学习自定义指令了,网上的资料真的很杂,大漠穷秋这个人的写资料很不错,总算明白了自定义指令。

  

明天计划的事情

   将任务8中的翻页做成指令

   继续任务9将图片上传的DOM操作写成指令

    

遇到的问题:

   

    我现在理解的指令就是对DOM的各种操作,angular定义好的还是我们自己自定义的都是完成了对于DOM的操作。而为什么要使用指令就是为了复用,将一些重复性的工作提取出来。

    

   指令的运行过程
   加载阶段:angular找到ngapp,确定应用边界
   编译阶段:遍历DOM,找到所有指令,根据指令代码中的template、repalce、transclue转换DOM,如果指令中有compile,angular会调用compile。

   链接阶段:每条指令的link都会被调用,link函数一般用来操作DOM,绑定事件监听器。


  restrict 
   E  需要创建带有自己的模板的指令

   A 需要为已有的HTML标签增加功能


  transclude:true
  template:"<div>Hello everyone!<div ng-transclude></div></div>"  
   在自定义指令的内部我们存放的东西会放在<div ng-transclude></div>中。

  指令与指令的交互:通过内部的controller方法给外部进行调用

 

 指令独立的scope为了解决多次调用指令时scope通用,一次更改会影响其他的指令使用。
 @     指令的scope获得外部scop的字符串
 =     将指令的scope与父scope进行双向绑定
 &    传递一个父scope的函数

  

收获: 学习angular自定义指令,HTML5的file 文件上传。 

 



返回列表 返回列表
评论

    分享到