使用元素与事件指令

Posted 2020-08-15 爆炒小黄鸡

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了使用元素与事件指令相关的知识，希望对你有一定的参考价值。

一、使用元素指令

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方法来计算指令属性值所定义的任何表达式，该属性值是从属性集合中取到的。