AngularJS常用指令

一、指令

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元素的css

ng-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 模块

转自：http://blog.csdn.net/u010870890/article/details/49619141