文档章节

AngularJS 学习笔记 (五) 基本概念和用法 之 指令

Asktao
 Asktao
发布于 2016/06/17 09:23
字数 1608
阅读 91
收藏 6

1、解析最简单的指令hello,匹配模式restrict

    html代码:

    

    JS代码:

    

PS:我理解的是以这4种方式获取元素,然后替换成template的样式。

2、解析最简单的指令hello,template、templateUrl、$templateCache

    2.1 template

    

    还是这个例子,template中的字符串替换原指令上的东西。

    2.2 templateUrl

    

    PS:这里想到的比如登录框~就可以用一个,然后出现一个登录框,可以在页面随意调用。只要使用就可以了。

    2.3 $templateCache

    

    PS:这里对$template.put("xx.html","tt")理解的不好。

            引入xx.html时,xx.html中有内容。为什么加上第二个参数之后,内容就显示不出来了

            难道是只是起个名字叫做xx.html?以后好相认?求指导!

3、解析最简单的指令hello,replace与transclude

    3.1 replace

    

    3.2 transclude (百度翻译:嵌入)

    html代码:

    

    JS代码:

    

    运行效果:

    

    运行效果解析:

    

4、comile与link(操作元素、添加CSS样式、绑定事件)

    

5、指令与控制器之间的交互

    html代码:

    

    JS代码:

    

    PS:这里要多看一遍,才能大概理解。可以使用scope.$apply("loadData");达到同样的效果

    5.2 指令和多控制器的交互

    html代码:

    

    JS代码:

    

    运行效果1:初始时状态

   

    运行状态2:当鼠标在进入“滑动加载”时

    

    运行状态3:当鼠标在进入“滑动加载2”时

    

    理解指令和控制器的交互:  

  1.  单对单:

    1. 在控制器MyCtrl中定义方法loadData();
    2.   在指令中定义标签,利用link方式定义DOM操作。
    3. 当运行时,达到触发条件后,调用loadData()方法,操作DOM变化。
  2. 单指令对多控制器

    1. 再定义一个控制器MyCtrl2,在其中再定义一个方法loadData2()
    2. 在HTML页面增加新元素MyCtrl2和其子层。
    3. 在标签中增加属性howToLoad,并分别赋值loadData()和loadData2()
    4. 上述步骤使用howToLoad属性作为公共变量,存放相应的控制器中的方法。这样做的好处是,可以统一调取howToLoad属性,一个x.directive("loader",func(){}}})就可以了。

6、指令间的交互

    html代码:

    

    JS代码:

    

    运行效果,当鼠标进入时:

    

    思考:(先吐槽,这个游戏一点意思也没有!!!!我失落了好久)

  1. html中增加标签, 并增加 strength、speed、light属性。
  2. 在JS中使用directive,创建superman的指令。
  3. 并且使用controller:function(){}给指令创建方法。等待被调用。
  4. 再增加link:function(){},指定触发方式和触发效果。
  5. 在JS中再创建依赖superman指令的指令。使用require:"^superman"
  6. 并绑定在superman的controller中定义的方法。
  7. 效果就是当superman标签有什么属性时,就输出这个属性。
  8. 所以我最后给这个所谓的游戏起名为,点谁就展示谁的能力。(自我满足吧)

7、scope的类型与独立的scope

    html代码:

    

    JS代码:

    

    运行效果1:

    

    运行效果2:如果不使用scope:{}

    

PS:如果没有使用独立scope,则任意地方输入内容,其他地方全部都受影响。

8、scope绑定策略

    @方式

    html代码:

    

    JS代码:

    

    运行效果:是以字符串方式传递

    

    =方式:

    html代码:

    

    JS代码:

    

    运行效果1:

    

    PS:运行之后,修改任意地方的数据,另一个数据也会改变。

    &方式:

    html代码:

   

    JS代码:

    

    运行效果:

    

    理解过程:

  1. 结构如上
  2. button的ng-click使用“&”方式,并传入参数,参数是模型上面的input的内容。
  3. 找到HTML页面的greeting标签内的greet属性,greet属性绑定了sayHello方法,并带入参数。
  4. 触发MyCtrl控制器中的sayHello方法,页面弹出Hello+name的提示框。

9、AngularJS内置指令

这里讲的比较草,主要的是还是去看文档。

可以定义新的标签,也可以重写过去的标签。

一个例子,使用form标签:

    HTML代码:

    

    JS代码:

    

这里要解释几个东西就会清晰:

  1. required指令: 相当于html5的required属性,验证不能为空
  2. ng-maxlength属性: 验证内容的长度最大值
  3. ng-minlength属性: 验证内容的长度最小值
  4. 表单名.$valid : 这个属性用来获取表单验证的状态,如果所有的验证都通过了,它就是true,只要有一项不通过,它就是false
  5. ng-disabled属性: 判断按钮是否禁用. 值为true时,禁用该按钮
  6. type属性: type="email" , type="number" ,虽然这些都是html5的属性,但是在angular中用法一致,可以兼容不支持html5的浏览器,实现相同的功能

PS:重点,这里的重点,重点在于啃文档,多练习!

10、实例解析Expander(展开)—— 自定义指令

一个展开关闭的小例子

    HTML代码:

    

    JS代码:

    

    运行效果:点击前和点击后的效果

     

挺好理解的:这里运用了之前的知识点transclude,果然还是实践出真知。

11、实例间隙Accordion(复合)

一个展开关闭的复杂例子

    HTML代码:

    JS代码:

    CSS代码:

    

    运行效果:默认为都关闭。点击一个打开一个。最多只显示一个是打开的。

    理解过程:

  1. 不知道从何说起,这是图片有详细的备注,多看多试!
  2. 有一个坑,<expander expander-title="expander.title">
  3. 独立scope设置,title:"=expaderTitle" 绑定title
  4. 如果有 "-"链接,则独立scope中"-"后面的要大写,以区分。(好坑!)

12、指令的运行原理:compile与link

  1. compile和link是互斥的,如果设置了compile则会忽略link
  2. compile是在编译阶段中执行的,link是在链接过程中执行的。
  3. 换句话说compile是在编译DOM之前操作DOM的;
  4. link是在DOM编译完成之后,再操作DOM的。

 

13、总结:ERP类型的系统必备的UI组件

PS:这里是用的miniui。网址:http://miniui.com/

14、总结:互联网/电商型系统必备的UI组件

PS:地址错误,更新地址  http://docs.kissyui.com/

15、第三方指令库angular-ui

用到的时候再说吧

github地址:http://angular-ui.github.io/ 

 

16、Driective思想的起源和原理概述

这里是采访原作者 ,他说原理是启发自FLEX。

 

 

洋洋洒洒学了2个星期的指令,感觉还是皮毛。代码果然还是项目上手最快!

 

 

 

© 著作权归作者所有

共有 人打赏支持
Asktao
粉丝 27
博文 97
码字总数 112788
作品 0
丰台
程序员
私信 提问
《AngularJS学习整理》系列分享专栏

《AngularJS学习整理》系列分享专栏 《AngularJS学习整理》已整理成PDF文档,点击可直接下载至本地查阅 https://www.webfalse.com/read/201748.html 文章 教你用AngularJS框架一行JS代码实现...

开元中国2015
2018/11/09
0
0
AngularJS 2014-10-22

前台代码起来越多,需要用一种更高效方式整合 MVC只是手段,终极目标是模块化和复用 第一部分:快速上手 1.1 感受AngularJS的4大核心特性 1.2 搭建开发、调试、测试环境 第二部分:基本概念和...

jayronwang
2014/10/22
0
0
【前端】—聊聊我认识的Angular

前言 最近接触的项目前端用到了Angular框架,之前略有耳闻,从vue换到Angular,感觉东西差不多,还是要系统学习的,先来了解下。 正文 1、Angular 的发展 AngularJS 是一款来自Google的前端J...

zt15732625878
2018/05/19
0
0
2017-03-04

学习内容:angular.js 自定义指令compile和link属性 完成内容:学习内容及笔记详细 磐石农商行商家管理端需求分析文档 工作问题:学习angular.js编译阶段 pre:指令链接到子元素之前运行 post...

Full_Session
2017/03/04
1
0
2017-03-06

学习内容:angular.js 自定义指令controller、require、scope、accordion等属性 完成内容:学习内容及笔记详细 磐石农商行项目框架下载 农商行物流数据添加 工作问题:学习angular.js 自定义...

Full_Session
2017/03/06
1
1

没有更多内容

加载失败,请刷新页面

加载更多

第1章

背景:因为最近在考教师资格证,考的是计算机学科,所以学科考的是:信息技术学科知识与教学能力;因此图书馆借了一本书,把最基本的知识看一遍,为之后的笔试和面试做充足的准备。 大学计算...

怪咖先生forever
32分钟前
1
0
element-ui之el-collapse-transition(折叠展开动画)源码解析学习

项目中发现同事使用了element-ui的el-collapse-transition来做折叠展开效果,打开源码看了下发现挺有意思,来解析学习一番。 el-collapse-transition的引入方式 // fade/zoom 等import 'e...

学霸猫
52分钟前
1
0
解释器模式_实战

前言 解释器模式是什么?这个设计模式其实比较冷门,不太会解释,用例子说明把。解释器模式一般用在sql,xml,json解析等场景。比如说你有一个json对象,你要获取这个对象中任意一个节点的值。...

grace_233
今天
6
0
告别2018

今天中午从喵喵家回来之后,倒头就睡到下午4点了。可能是之前透支的身体,在我放松下来后,开始觉得疲惫了,所以最近估计会进入嗜睡期。醒来之后,拿了包花生,开了瓶低糖菊花茶,听着网易云...

七木网络科技
今天
4
0
MySql数据库分表分区实践

1. 背景 —— 公司物联网项目 海量设备通过物联网服务接入云端,设备每30s上报一次自身数据(以下称为动态数据)。 物联网服务将设备上报的数据转发给数据处理网关,由数据入库网关执行批量入...

吴伟祥
今天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部