CODEWITHSUNDEEP
angularjsangular-material
Kraishan
Kraishan

Reputation: 455

Angular Material swipe gesture works hardly

I am trying to add swipe functionality to a ng-repeated list of elements. However, the swiping works badly. Sometimes a swipe gestures (all on desktop) is recognized, but most of the times I'm click and swiping like a madman to achieve the expected result.

I am using Material Angular.

Code:

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

On the Angular Material swipe docpage (https://material.angularjs.org/latest/demo/swipe) it seems easy and it works like a charm. However my implementation of the directive doesn't seem to work as it should. It rather lets me select the text inside the element than swiping.

Also, I'd rather want the span to be a a href, but this only lets me drag the whole element out of space.

Upvotes: 0

Views: 1660

Answers (1)

Guillaume Roche-Bayard
Guillaume Roche-Bayard

Reputation: 447

I believe that to assure a proper work of all material function you should use their containers and directives instead. So you should put all of that inside a md-content, and also use ng-ifs instead of ng-show on the swiped div. Which would result in something like that : 

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

I used this kind of code snippet on some md-sidenav and it works. By the way, if you're using chrome and use mobile view, the md-swipe-left is always triggered, doesn't matter if you swipe left, right, top or bottom.

Hope this helps

Upvotes: 1

Related Questions