文字
分享

AngularJS: API: ngTouch/directive/ngSwipeRight


ngSwipeRight

  1. - directive in module ngTouch

Specify custom behavior when an element is swiped to the right on a touchscreen device. A rightward swipe is a quick, left-to-right slide of the finger. Though ngSwipeRight is designed for touch-based devices, it will work with a mouse click and drag too.

Requires the ngTouch module to be installed.

指令信息

  • 这个指令执行优先级为0.

用法

  • 作为属性使用:

    1

    2

    3

    4

    <code style="box-sizing:border-box;font-family:Menlo, Monaco, Consolas, &apos;Courier New&apos;, monospace;font-size:inherit;padding:0px;color:inherit;background-color:transparent;white-space:pre-wrap;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;"><span style="box-sizing:border-box;color:navy;"><ANY</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">

      </span><span style="box-sizing:border-box;color:teal;">ng-swipe-right</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">=</span><span style="box-sizing:border-box;color:rgb(221, 17, 68);">""</span><span style="box-sizing:border-box;color:navy;">></span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">

    ...

    </span><span style="box-sizing:border-box;color:navy;"></ANY></span></code>

参数

参数 类型 详述
ngSwipeRight expression

在xx触发时执行的表达式 right swipe. (事件对象存于 $event)

示例

index.html

1

2

3

4

5

<code style="box-sizing:border-box;font-family:Menlo, Monaco, Consolas, &apos;Courier New&apos;, monospace;font-size:inherit;padding:0px;color:inherit;background-color:transparent;white-space:pre-wrap;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;"><span style="box-sizing:border-box;color:navy;"><div</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);"> </span><span style="box-sizing:border-box;color:teal;">ng-show</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">=</span><span style="box-sizing:border-box;color:rgb(221, 17, 68);">"!showActions"</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);"> </span><span style="box-sizing:border-box;color:teal;">ng-swipe-left</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">=</span><span style="box-sizing:border-box;color:rgb(221, 17, 68);">"showActions = true"</span><span style="box-sizing:border-box;color:navy;">></span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">

  Some list content, like an email in the inbox

</span><span style="box-sizing:border-box;color:navy;"></div></span><span style="box-sizing:border-box;color:rgb(51, 51, 51);"></span><span style="box-sizing:border-box;color:navy;"><div</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);"> </span><span style="box-sizing:border-box;color:teal;">ng-show</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">=</span><span style="box-sizing:border-box;color:rgb(221, 17, 68);">"showActions"</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);"> </span><span style="box-sizing:border-box;color:teal;">ng-swipe-right</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">=</span><span style="box-sizing:border-box;color:rgb(221, 17, 68);">"showActions = false"</span><span style="box-sizing:border-box;color:navy;">></span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">

  </span><span style="box-sizing:border-box;color:navy;"><button</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);"> </span><span style="box-sizing:border-box;color:teal;">ng-click</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">=</span><span style="box-sizing:border-box;color:rgb(221, 17, 68);">"reply()"</span><span style="box-sizing:border-box;color:navy;">></span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">Reply</span><span style="box-sizing:border-box;color:navy;"></button></span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">

  </span><span style="box-sizing:border-box;color:navy;"><button</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);"> </span><span style="box-sizing:border-box;color:teal;">ng-click</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">=</span><span style="box-sizing:border-box;color:rgb(221, 17, 68);">"delete()"</span><span style="box-sizing:border-box;color:navy;">></span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">Delete</span><span style="box-sizing:border-box;color:navy;"></button></span><span style="box-sizing:border-box;color:rgb(51, 51, 51);"></span><span style="box-sizing:border-box;color:navy;"></div></span></code>

script.js

1

<code style="box-sizing: border-box; font-size: inherit; padding: 0px; color: inherit; background-color: transparent; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px;"><span style="box-sizing: border-box;">angular</span><span style="box-sizing: border-box;">.</span><span style="box-sizing: border-box;">module</span><span style="box-sizing: border-box;">(</span><span style="box-sizing: border-box; color: rgb(221, 17, 68);">'ngSwipeRightExample'</span><span style="box-sizing: border-box;">,</span><span style="box-sizing: border-box;"> </span><span style="box-sizing: border-box;">[</span><span style="box-sizing: border-box; color: rgb(221, 17, 68);">'ngTouch'</span><span style="box-sizing: border-box;">]);</span></code>