AngularJS常用指令
2015-11-03 17:19
681 查看
刚接触AngularJS不久,总结了一些常用的内容,内容不是很多,也或许有一些错误,希望指正和海涵,内容会根据我了解程度不断更新完善.
2、ng-controller
为应用定义控制器对象
3、ng-repeat
遍历集合中(数组中)的每个项,给每个元素生成模板实例
普通:
自定义遍历后的内容:
过滤:
排序:
普通:
显示的是name,选中值是id
分组:
7、ng-model
把HTML元素值(比如输入域的值)绑定到应用程序
直接使用布尔值
使用表达式来计算布尔值
10、ng-init
初始化应用程序数据
11、ng-bind
绑定程序数据到HTML元素,也可用"{{}}"代替
12、ng-disabled
绑定应用程序数据到 HTML 元素的 disabled 属性
13、ng-include
在应用中包含 HTML内容
14、ng-form
和HTML的<form>标签一样,但可以被<form>标签嵌套
15、ng-readonly
绑定应用程序数据到 HTML 元素的 readonly 属性
1、ng-click
定义了AngularJS的点击事件
引发事件的按键
非字符键不会引发 KeyPress 事件,但非字符键却可以引发 KeyDown 和 KeyUp 事件。
事件引发的时间
KeyDown 和 KeyPress 事件在按下键时发生,KeyUp 事件在释放键时发生。
事件发生的顺序
KeyDown -> KeyPress -> KeyUp
三、服务
watchFn:该参数是一个带有Angular表达式或者函数的字符串,它会返回被监控的数据模型的当前值。
watchAction:这是一个函数或者表达式,当watchFn 发生变化时会被调用。
deepWatch:如果设置为true,这个可选的布尔型参数将会命令Angular去检查被监控对象的每个属性是否发生了变化。
获取并监听URL。
改变URL。
当出现以下情况时同步URL
改变地址栏
点击了后退按钮(或者点击了历史链接)
点击了一个链接
一系列方法来获取URL对象的具体内容用(protocol, host, port, path, search, hash).formatDate
获取route的参数
一、指令
1、ng-app
定义应用程序的根元素<div ng-app="app"></div>
var app = angular.module('app', []);
2、ng-controller
为应用定义控制器对象<div ng-controller="appController"></div>
app.controller('appController', function($scope) { //你的代码 })
3、ng-repeat
遍历集合中(数组中)的每个项,给每个元素生成模板实例普通:
ng-repeat="key in keys"
自定义遍历后的内容:
ng-repeat="(key, value) in cache.info()"
过滤:
ng-repeat="friend in friends | filter:searchText"
排序:
ng-repeat="friend in friends | orderBy:'-age'"
4、ng-options
遍历集合或数组,为HTML的<select>标签生成<option>元素普通:
ng-options="color.name for color in colors"
显示的是name,选中值是id
ng-options="option.id as option.name for option in Options"
分组:
ng-options="option.id group by option.name for option in Options"
5、ng-class
用于动态设置dom元素的样式ng-class="{'true':'badge bg-green', 'false':'badge bg-red'}[isActive]"
6、ng-style
用于动态自定义dom元素的cssng-style="{ color: i.color=='' || i.color=='Default' ? 'default' : 'red' }"
7、ng-model
把HTML元素值(比如输入域的值)绑定到应用程序<input type="text" ng-model="userName">
8、ng-if
可以完全根据表达式的值在DOM中生成或移除一个元素<div ng-if="isChecked == true">为true则可显示</div>
9、ng-hide / ng-show
隐藏或显示 HTML 元素直接使用布尔值
<p ng-hide="true">我是不可见的</p> <p ng-hide="false">我是可见的</p>
<p ng-show="true">我是可见的</p> <p ng-show="false">我是不可见的</p>
使用表达式来计算布尔值
<p ng-hide="1+1 == 2">我是不可见的</div>
<p ng-show="2+2 == 4">我是可见的</div>
10、ng-init
初始化应用程序数据<div ng-init="name='张三'"> My name is {{ name }} </div>
11、ng-bind
绑定程序数据到HTML元素,也可用"{{}}"代替<div> <h1>Hello <span ng-bind="name"></span></h1> </div>
12、ng-disabled
绑定应用程序数据到 HTML 元素的 disabled 属性<button ng-disabled="1+1==2">不可点击</button>
13、ng-include
在应用中包含 HTML内容<div ng-include="'userList.htm'"></div>
14、ng-form
和HTML的<form>标签一样,但可以被<form>标签嵌套15、ng-readonly
绑定应用程序数据到 HTML 元素的 readonly 属性<input type="text" ng-readonly="isReadOnly"/>
16、ng-checked
为HTML的勾选框动态设置勾选状态<input type="checkbox" ng-checked="true" />
17、ng-selected
为HTML的下拉框<select>设置默认选择<select> <option>First</option> <option>Second</option> <option ng-selected="true">Third</option> </select><span> <select> <option ng-repeat="person in persons" ng-select="person.sex == 'boy'">{{ person.sex }}</option> </select>
18、ng-cloak
隐藏所有被它包含的元素,在浏览器加载和编译渲染完成之后,angular会自动删除ngCloak元素属性,这样这个元素就会变成可见的<div ng-cloak> <h1>Hello World!</h1> </div>
19、ng-switch
分支语句<span ng-switch="person.sex"> <span ng-switch-when="boy">boy</span> <span ng-switch-when="girl">girl</span> <span ng-switch-default></span>
20、ng-href
和HTML的href属性相通<a ng-href="/user/1">Link</a>
21、ng-src
和HTML的src属性相通<img ng-src="{{imageUrl}}">
二、事件
1、ng-click
定义了AngularJS的点击事件<button ng-click="click()">click me</button>
2、ng-dbl-click
定义了AngularJS的双击事件<button ng-dblclick="dblclick()">click me</button>
3、ng-mousedown
当元素上按下鼠标按钮时触发<button ng-mousedown="mousedown($event)">button</button>
4、ng-mouseenter
当鼠标进入元素时触发<button ng-mouseenter="mouseenter()">button</button>
5、ng-mouseleave
当鼠标离开元素时触发<button ng-mouseleave="mouseleave()">button</button>
6、ng-mousemove
当鼠标指针移动到元素上时触发<button ng-mousemove="mousemove()">button</button>
7、ng-keydown
在用户按下键盘按键时触发,要把$event传过去,一般都是要判断按了哪个按键<input type="text" ng-keydown="keydown($event)"/>
8、ng-keyup
在用户按下键盘按键并松开时触发<input type="text" ng-keyup="keyup($event)"/>
9、ng-keypress
在用户敲击键盘按键时触发<input type="text" ng-keypress="keypress($event)"/>keydown,keypress,keyup三者区别:
引发事件的按键
非字符键不会引发 KeyPress 事件,但非字符键却可以引发 KeyDown 和 KeyUp 事件。
事件引发的时间
KeyDown 和 KeyPress 事件在按下键时发生,KeyUp 事件在释放键时发生。
事件发生的顺序
KeyDown -> KeyPress -> KeyUp
10、ng-change
当元素的model值改变时触发<input type="text" ng-model="text" ng-change="change()" ng-minlength="5"/>
11、ng-blur
当元素失去焦点时触发<a href="" ng-blur="blur()">link</a>
12、ng-focus
当元素获取焦点时触发<a href="" ng-focus="focus()">link</a>
三、服务
1、$scope
$scope 对象在 AngularJS 中充当数据模型的作用,也就是一般 MVC 框架中 Model 得角色.但又不完全与通常意义上的数据模型一样,因为 $scope 并不处理和操作数据,它只是建立了视图和 HTML 之间的桥梁,让视图和 Controller 之间可以友好的通讯。2、$rootScope
$rootScope 是所有 $scope 的最上层对象,可以理解为一个 AngularJS 应用中得全局作用域对象。3、$watch
当你的数据模型中某一部分发生变化时,$watch函数可以向你发出通知。你可以监控单个对象的属性,也可以监控需要经过计算的结果(函数)。它的函数签名为$watch(watchFn, watchAction, deepWatch)。watchFn:该参数是一个带有Angular表达式或者函数的字符串,它会返回被监控的数据模型的当前值。
watchAction:这是一个函数或者表达式,当watchFn 发生变化时会被调用。
deepWatch:如果设置为true,这个可选的布尔型参数将会命令Angular去检查被监控对象的每个属性是否发生了变化。
4、$http
$http是 AngularJS 中的一个核心服务,用于读取远程服务器的数据。可以使用get、post、patch、delete等请求。$http.get(url).success(function(data) { // success }).error(function (data) { // fail });
5、$location
暴露当前地址栏的URL,这样你就能获取并监听URL。
改变URL。
当出现以下情况时同步URL
改变地址栏
点击了后退按钮(或者点击了历史链接)
点击了一个链接
一系列方法来获取URL对象的具体内容用(protocol, host, port, path, search, hash).formatDate
6、$window
7、$interval
$interval(function() { // 每秒执行一次 }, 1000);
8、$timeout
$timeout(function(){ // 延迟1秒执行 }, 1000);
9、$routeParams
通过route传递参数.when('/platform/user/deatil/:params', { templateUrl: 'V/user/user.detail.tpl.html', controller: 'PlatformUserDetailController' })
获取route的参数
var params = $routeParams.params
10、$compile
由$compile方法来执行DOM的编译
四、全局API
1、转换
API | 描述 |
---|---|
angular.lowercase() | 将字符串转换为小写 |
angular.uppercase() | 将字符串转换为大写 |
angular.copy() | 数组或对象深度拷贝 |
angular.forEach() | 对象或数组的迭代函数 |
2、比较
API | 描述 |
---|---|
angular.isArray() | 如果引用的是数组返回 true |
angular.isDate() | 如果引用的是日期返回 true |
angular.isDefined() | 如果引用的已定义返回 true |
angular.isElement() | 如果引用的是 DOM 元素返回 true |
angular.isFunction() | 如果引用的是函数返回 true |
angular.isNumber() | 如果引用的是数字返回 true |
angular.isObject() | 如果引用的是对象返回 true |
angular.isString() | 如果引用的是字符串返回 true |
angular.isUndefined() | 如果引用的未定义返回 true |
angular.equals() | 如果两个对象相等返回 true |
3、JSON
API | 描述 |
---|---|
angular.fromJSON() | 反系列化 JSON 字符串 |
angular.toJSON() | 系列化 JSON 字符串 |
4、基础
API | 描述 |
---|---|
angular.bootstrap() | 手动启动 AngularJS |
angular.element() | 包裹着一部分DOM element或者是HTML字符串,把它作为一个jQuery元素来处理。 |
angular.module() | 创建,注册或检索 AngularJS 模块 |
相关文章推荐
- angularjs二级联动下拉框出现空白项,value带有问号的解决方案
- 从一段.html代码说起谈谈AngularJs中的双向数据绑定
- AngularJS的初步学习(1)
- AngularJS API
- Angular学习笔记--last_update 20151106
- AngularJS操作DOM——angular.element
- AngularJS 输入验证
- “JavaScript Promises和AngularJS $q Service”Part 2 (教程篇)
- AngularJS 模块& 表单
- AngularJS学习笔记
- AngularJS的directive(指令)的 4000 配置选项说明
- “JavaScript Promises和AngularJS $q Service”Part 1 (基础篇)
- AngularJS控制器controller之间通信
- AngularJS API之bootstrap启动
- AngularJs Angular数据类型判断
- AngularJS 技术总结
- angularjs和ajax的结合使用 (二)
- angular 遇到的坑--小记1
- angularjs:[1] ui-router 权限控制
- Angular (二) Jasmine单元测试和端到端测试