AngularJS 学习笔记 (五) 基本概念和用法 之 指令
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”时
理解指令和控制器的交互:
-
单对单:
- 在控制器MyCtrl中定义方法loadData();
- 在指令中定义标签,利用link方式定义DOM操作。
- 当运行时,达到触发条件后,调用loadData()方法,操作DOM变化。
-
单指令对多控制器
- 再定义一个控制器MyCtrl2,在其中再定义一个方法loadData2()
- 在HTML页面增加新元素MyCtrl2和其子层。
- 在标签中增加属性howToLoad,并分别赋值loadData()和loadData2()
- 上述步骤使用howToLoad属性作为公共变量,存放相应的控制器中的方法。这样做的好处是,可以统一调取howToLoad属性,一个x.directive("loader",func(){}}})就可以了。
6、指令间的交互
html代码:
JS代码:
运行效果,当鼠标进入时:
思考:(先吐槽,这个游戏一点意思也没有!!!!我失落了好久)
- html中增加标签, 并增加 strength、speed、light属性。
- 在JS中使用directive,创建superman的指令。
- 并且使用controller:function(){}给指令创建方法。等待被调用。
- 再增加link:function(){},指定触发方式和触发效果。
- 在JS中再创建依赖superman指令的指令。使用require:"^superman"
- 并绑定在superman的controller中定义的方法。
- 效果就是当superman标签有什么属性时,就输出这个属性。
- 所以我最后给这个所谓的游戏起名为,点谁就展示谁的能力。(自我满足吧)
7、scope的类型与独立的scope
html代码:
JS代码:
运行效果1:
运行效果2:如果不使用scope:{}
PS:如果没有使用独立scope,则任意地方输入内容,其他地方全部都受影响。
8、scope绑定策略
@方式
html代码:
JS代码:
运行效果:是以字符串方式传递
=方式:
html代码:
JS代码:
运行效果1:
PS:运行之后,修改任意地方的数据,另一个数据也会改变。
&方式:
html代码:
JS代码:
运行效果:
理解过程:
- 结构如上
- button的ng-click使用“&”方式,并传入参数,参数是模型上面的input的内容。
- 找到HTML页面的greeting标签内的greet属性,greet属性绑定了sayHello方法,并带入参数。
- 触发MyCtrl控制器中的sayHello方法,页面弹出Hello+name的提示框。
9、AngularJS内置指令
这里讲的比较草,主要的是还是去看文档。
可以定义新的标签,也可以重写过去的标签。
一个例子,使用form标签:
HTML代码:
JS代码:
这里要解释几个东西就会清晰:
- required指令: 相当于html5的required属性,验证不能为空
- ng-maxlength属性: 验证内容的长度最大值
- ng-minlength属性: 验证内容的长度最小值
- 表单名.$valid : 这个属性用来获取表单验证的状态,如果所有的验证都通过了,它就是true,只要有一项不通过,它就是false
- ng-disabled属性: 判断按钮是否禁用. 值为true时,禁用该按钮
- type属性: type="email" , type="number" ,虽然这些都是html5的属性,但是在angular中用法一致,可以兼容不支持html5的浏览器,实现相同的功能
PS:重点,这里的重点,重点在于啃文档,多练习!
10、实例解析Expander(展开)—— 自定义指令
一个展开关闭的小例子
HTML代码:
JS代码:
运行效果:点击前和点击后的效果
挺好理解的:这里运用了之前的知识点transclude,果然还是实践出真知。
11、实例间隙Accordion(复合)
一个展开关闭的复杂例子
HTML代码:
JS代码:
CSS代码:
运行效果:默认为都关闭。点击一个打开一个。最多只显示一个是打开的。
理解过程:
- 不知道从何说起,这是图片有详细的备注,多看多试!
- 有一个坑,<expander expander-title="expander.title">
- 独立scope设置,title:"=expaderTitle" 绑定title
- 如果有 "-"链接,则独立scope中"-"后面的要大写,以区分。(好坑!)
12、指令的运行原理:compile与link
- compile和link是互斥的,如果设置了compile则会忽略link
- compile是在编译阶段中执行的,link是在链接过程中执行的。
- 换句话说compile是在编译DOM之前操作DOM的;
- 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个星期的指令,感觉还是皮毛。代码果然还是项目上手最快!
转载于:https://my.oschina.net/asktao/blog/693223