CODEWITHSUNDEEP
javascriptangularjsswipe
benjipelletier
benjipelletier

Reputation: 663

AngularJS: Function call on ngSwipeLeft

Title pretty much explains it all. Inputting ngSwipeLeft="someFunction()" does not seem to work as I hoped it would. Maybe I am doing it wrong, but what are your ideas? Here is the documentation for ngSwipeLeft.

Example

Thanks, Ben

Upvotes: 1

Views: 8910

Answers (2)

Parveen Chauhan
Parveen Chauhan

Reputation: 1496

    <div ng-controller="MyCtrl">
        <div>
            <div>
                <pre> Left swipes: {{model.left}}</pre>
            </div>
            <div>
                <pre>Right swipes: {{model.right}}</pre>
            </div>
            <div>
                <pre>Touch clicks: {{model.click}} </pre>
            </div>
        </div>
        <div class="swipy"
            ng-swipe-left="swipeLeft()"
            ng-swipe-right="swipeRight()"
            ng-click="touchClick()">
            Swipe me !
        </div>
    </div>

<style type="text/css">
    div {
        font-size: 0.9em;
    }

    div.swipy {
        text-align: center;
        padding: 15px;
        margin: 5px;
        border-radius: 2px;
        border: 3px groove gray;
        background-color: light-gray;
    }

</style> 
<script type="text/javascript"> 
    app.controller('MyCtrl', function ($scope) {
        $scope.model = {
            left:  0,
            right: 0,
            click: 0
        };
        $scope.swipeLeft = function () {
            $scope.model.left += 1;
        };
        $scope.swipeRight = function () {
            $scope.model.right += 1;
        };
        $scope.touchClick = function () {
            $scope.model.click += 1;
        };
    });

</script>

Upvotes: 0

user2740086
user2740086

Reputation:

I think what you need to do is create a controller for that javascript, and then work off of its scope. 

<div ng-show="!showActions" data-ng-swipe-left="someFunction()">
Some list content, like an email in the inbox
</div>
<div ng-show="showActions" data-ng-swipe-right="someFunction()">">
<button ng-click="reply()">Reply</button>
<button ng-click="delete()">Delete</button>
</div>

And the JS

$scope.showActions = false;

$scope.someFunction = function () {
   $scope.showActions = !$scope.showActions;
};

That is how I do it in my applications. I hope it helps.

Here is the Plunk.

The plunk works but it is a little off. It sometimes highlights instead of switching over. It works best when swiping to the right side.

Upvotes: 3

Related Questions