angular指令
2017-04-24 15:08
106 查看
在视图上面怎么去获取模型上面的数据:使用angular指令
angular 的指令都是ng-开头,angluar 后期方便去查找。angular常用指令:
1: ng-app 用来定义一个应用的边界2: ng-controller 用来将控制器跟视图进行关联
3: ng-show 用来控制当前元素是否显示
4: ng-hide 用来控制当前元素是否隐藏
5: ng-if 空来控制是否出现当前元素
6: ng-class 给当前元素添加一个样式
7: ng-disabled 控制当前元素是否禁用
8: ng-checked 控制当前元素是否选中
9: ng-selected 控制当前元素是否选中
10: ng-readonly 控制当前元素是否只读
11: ng-include 去包含一个新的模板,放在当前元素里面
12:ng-bind 用来将模型上面的数据获取视图上面
13:ng-cloak 用来解决闪烁问题
14: ng-src 给当前元素添加一个src 属性。对应的值 是一个字符串,路径
15:ng-href 给当前元素添加一个href 属性。相当于是我们页面上的href 属性
16: ng-repeat 迭代数组
17:ng-init 初始化数据 ng-init="username='zhangsan',age=11"
18:ng-switch 根据表达式显示或隐藏对应的部分
ng-switch-when 如果匹配选中选择显示,其他为匹配的则移除
ng-switch-defalut 设置默认选项,如果都没有匹配的情况,默认选项会显示
19: ng-model 将视图的数据流向到模型.
自定义指令:directive()
规则:1.指令要遵守驼峰命名法则2.返回的是一个对象
directive()方法
两个参数:1.指令的名称
2.指令的行为,逻辑,函数
App.directive("myHello",function(){ return{ restrict:"ECMA", replace:true,//替换原来的标签 template:"<h1>hello world</h1>" } });
restrict : 条约,限制,用来定义指令的类型
E:element,元素,这个指令可以通过标签的方式就可以使用这个指令
C: class,标签里的类名
M: mark,通过注释的方式去使用
<!--directive:hello-->//通过注释的方式来使用这个指令,前面必须添加directive
A : attribute
replace :替换,是否替换原有标签
template:里面的内容必须使用标签去包含起来、
相关文章推荐
- Angular工具方法学习
- Angular ng-repeat 对象和数组遍历实例
- angular.element方法汇总
- 深入学习JavaScript的AngularJS框架中指令的使用方法
- 仿Angular Bootstrap TimePicker创建分钟数-秒数的输入控件
- 如何在Angular2中使用jQuery及其插件的方法
- Angular路由简单学习
- Angular下H5上传图片的方法(可多张上传)
- 详解angular中如何监控dom渲染完毕
- Angular用来控制元素的展示与否的原生指令介绍
- Angular在一个页面中使用两个ng-app的方法
- 手动初始化Angular的模块与控制器
- Angular 页面跳转时传参问题
- angular中实现控制器之间传递参数的方式
- Angular 输入框实现自定义验证功能
- 全面解析Angular中$Apply()及$Digest()的区别
- Angular外部使用js调用Angular控制器中的函数方法或变量用法示例
- angular2+nodejs实现图片上传功能
- div实现自适应高度的textarea实现angular双向绑定
- angular源码学习第一篇 setupModuleLoader方法