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

一、解析最简单的指令hello，匹配模式restrict

    html代码：

    

    JS代码：

    

PS：我理解的是以这4种方式获取元素，而后替换成template的样式。

二、解析最简单的指令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？之后好相认？求指导！

三、解析最简单的指令hello，replace与transclude

    3.1 replace

    

    3.2 transclude (百度翻译：嵌入)

    html代码：

    

    JS代码：

    

    运行效果：

    

    运行效果解析：

    

四、comile与link（操做元素、添加CSS样式、绑定事件）

    

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

    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(){}}})就能够了。

六、指令间的交互

    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. 因此我最后给这个所谓的游戏起名为，点谁就展现谁的能力。（自我知足吧）

七、scope的类型与独立的scope

    html代码：

    

    JS代码：

    

    运行效果1：

    

    运行效果2：若是不使用scope:{}

    

PS：若是没有使用独立scope，则任意地方输入内容，其余地方所有都受影响。

八、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的提示框。

九、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：重点，这里的重点，重点在于啃文档，多练习！

十、实例解析Expander（展开）—— 自定义指令

一个展开关闭的小例子

    HTML代码：

    

    JS代码：

    

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

     

挺好理解的：这里运用了以前的知识点transclude，果真仍是实践出真知。

十一、实例间隙Accordion（复合）

一个展开关闭的复杂例子

    HTML代码：

    JS代码：

    CSS代码：

    

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

    理解过程：

1. 不知道从何提及，这是图片有详细的备注，多看多试！
2. 有一个坑，<expander expander-title="expander.title">
3. 独立scope设置，title："=expaderTitle" 绑定title
4. 若是有 "-"连接，则独立scope中"-"后面的要大写，以区分。(好坑！)

十二、指令的运行原理：compile与link

1. compile和link是互斥的，若是设置了compile则会忽略link
2. compile是在编译阶段中执行的，link是在连接过程当中执行的。
3. 换句话说compile是在编译DOM以前操做DOM的；
4. link是在DOM编译完成以后，再操做DOM的。

 

1三、总结：ERP类型的系统必备的UI组件

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

1四、总结：互联网/电商型系统必备的UI组件

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

1五、第三方指令库angular-ui

用到的时候再说吧

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

 

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

这里是采访原做者 ，他说原理是启发自FLEX。

 

 

洋洋洒洒学了2个星期的指令，感受仍是皮毛。代码果真仍是项目上手最快！