Question

我正在尝试将滑动功能添加到ng重复的元素列表中。但是，刷卡工作很糟糕。有时可以识别滑动手势（全部在桌面上），但大多数时候我会像疯子一样点击和滑动以达到预期效果。

我正在使用Material Angular。

代码：

 <div ng-repeat="link in Links |  filter: { category: 'quick' }">
    <div ng-show="!link.show" md-swipe-left="link.show = true">
        <div class="lv-item ">
            <span href="{{link.url}}" class="no-select" target="_blank" >
                <div class="lv-title" class="no-select">{{link.title}}</div>
                    <small class="lv-small" class="no-select">{{link.description}}</small>
            </span>
            </div>
        </div>
        <div ng-show="link.show" md-swipe-right="link.show = false">
            <div class="lv-item delete" >
                <button ng-click="deleteLink(link.id)">Verwijder</button>
            </div>  
        </div>
</div>

在Angular Material滑动文档（https://material.angularjs.org/latest/demo/swipe）上，它看起来很简单，就像魅力一样。但是，我对该指令的实现似乎并没有起到应有的作用。它让我选择元素内的文本而不是滑动。

另外，我更希望跨度成为一个href，但这只能让我将整个元素拖出空间。

Answer 1

我认为，为了确保所有材料功能的正确工作，您应该使用它们的容器和指令。因此，您应该将所有这些内容放在md内容中，并且在刷过的div上使用ng-ifs而不是ng-show。这会产生类似的结果：

<md-content>
  <div ng-repeat="link in Links |  filter: { category: 'quick' }">
    <div ng-if="!link.show" md-swipe-left="link.show = true">
        <div class="lv-item ">
            <span href="{{link.url}}" class="no-select" target="_blank" >
                <div class="lv-title" class="no-select">{{link.title}}</div>
                    <small class="lv-small" class="no-select">{{link.description}}</small>
            </span>
        </div>
    </div>
    <div ng-if="link.show" md-swipe-right="link.show = false">
        <div class="lv-item delete" >
            <button ng-click="deleteLink(link.id)">Verwijder</button>
        </div>  
    </div>
  </div>
</md-content>

我在某些md-sidenav上使用了这种代码片段并且它有效。顺便说一句，如果您使用Chrome并使用移动视图，则始终触发md-swipe-left，如果您向左，向右，向上或向下滑动并不重要。

希望这有帮助

Angular Material滑动手势几乎不起作用

1 个答案: