使用元素与事件指令

一、使用元素指令

ng-if 从DOM中添加和移除元素

ng-class 为某个元素设置class属性

ng-class-even 对由ng-repeat指令生成的偶数元素设置class属性

ng-class-odd 对由ng-repeat指令生成的奇数元素设置class属性

<tr ng-repeat="item in data" ng-class-even="settings.rows" ng-class-odd="settings.columns"></tr>

ng-hide 在DOM中显示和隐藏元素

ng-show 在DOM中显示和隐藏元素

ng-style 设置一个或多个CSS属性，而不是通过一个CSS类。

<td ng-style="{‘background-color‘:settings.columns}">{{item.action}}</td>

ng-style指令被配置为使用一个对象，该对象的属性为相应的应设置的CSS属性。

二、处理事件

ng-blur 元素失去焦点时被触发

ng-change 表单元素的内容状态发生变化时被触发（例如复选框被选中，输入框元素中的文本被修改等等）

ng-click 用户点击鼠标或光标时触发

ng-copy/ng-cut/ng-paste 为copy,cut,paste事件指定自定义行为

ng-dbclick 用户双击鼠标/光标时触发

ng-focus 元素获得焦点时触发

ng-keydown/ng-keypress/ng-keyup 用户按下/释放某个键时触发

ng-mousedown/ng-mouseenter/ng-mouseleave/ng-mousemove/ng-mouseover/ng-mouseup 在用户使用鼠标/光标与元素发生交互时触发

ng-submit 表单被提交时触发

事件处理器可以直接计算一个表达式或者调用控制器的一个行为。

<button ng-click="data.color=‘red‘">{{data.value}}</button>
<!--传入event使用$event-->
<p ng-mouseenter="handleEvent($event)"></p>  

$scope.handleEvent=function(e){
    // do something
}

添加事件指令之外的事件

<div tap="change()"></div>

myApp.directive("tap",function(){
    return function(scope,element,attrs){
        element.on("touchstart touchend",function(){
            scope.$apply(attrs["tap"]);
        })
    }
})

使用jqLite的on方法为touchstart和touchend事件注册一个处理函数。我的处理函数调用scope.$apply方法来计算指令属性值所定义的任何表达式，该属性值是从属性集合中取到的。

三、管理特殊属性

3.1 布尔属性

某些HTML属性仅当元素上存在该属性时就产生效果，不论值是多少，这类属性称为布尔属性。

比如：disabled 当应用了这个属性之后就会被禁用，即使该属性没有值。可以设置空值，不设置值，或者设置为disabled。不能通过设置disabled=false来启用该元素

布尔属性的指令有：

ng-checked 管理checked属性（在input元素上使用）

ng-disabled 管理disabled属性（在input和button元素上使用）

ng-open 管理open属性（在details元素上使用）

ng-readonly 管理readonly属性（在input元素上使用）

ng-selected 管理selected属相（在Option元素上使用）

3.2 管理其他属性

ng-href 在a元素上设置href属性，在使用这个指令时，会在angularjs处理完元素之前防止用户通过单击链接跳转到错误的目标位置。

ng-src 在img元素上设置src属性

ng-srcset 在img元素上设置srcset属相。允许为显示不同的大小和像素密度而指定多个图片。