AngularJS常用指令和事件_angularjs 如何在angular js中获取长按事件

一、指令

1、ng-app

 定义应用程序的根元素

<div ng-app="app"></div> 

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

直接使用布尔值   hide

<p ng-hide="true">我是不可见的</p>  

<p ng-hide="false">我是可见的</p>

show

<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、转换

 

2、比较

 

3、JSON

 

4、基础