ngSwipe: cant get demo page to work

[peter-mouland]

The problem presents itself here:
http://docs.angularjs.org/api/ngTouch/directive/ngSwipeLeft

I cant seem to click and drag the demo text to reveal the 'reply' and 'delete' button.
Also using chromes 'emulate touch' does not work.
Also swiping the text on my iPhone 4s iOS7 does not work.

It's hard to believe there can be something wrong with that part of the code as it must be core to many apps, but i cant seem to get it working :s

is the demo page complete?

[bramslob]

The doc seems to be broken, I also can't edit it at plunker.
The way I use it in my project is as follows:

<tr class="item swipeRow row" ng-repeat="result in results" 
     ng-swipe-left="showActions = true" ng-swipe-right="showActions = false">
    <td class="col-25">
        {{result.foo}}
    </td>
    <td class="col-25">
        {{result.bar}}
    </td>
    <td class="col-25">
        {{result.foobar}}
    </td>
    <td class="swipeButtons col-33" ng-show="showActions">
        <button class="button ion-ios7-person-outline icon-left button-icon">Something</button>
        <button class="button ion-edit icon-left button-icon">Something else</button>
    </td>
</tr>

[peter-mouland]

which version of angular are you using?

with angular 1.2.16
i have angular.module('myApp', ['ui.router', 'ngAnimate', 'ngTouch'])
and <div ui-view="modules" class="modules-container animate cube span-9 " autoscroll="false" ng-swipe-left="next()" ng-swipe-right="previous()"></div>
but cant get either function to fire.

[bramslob]

Currently I am using Ionic Framework version 1.0 beta-1 which incorporates AngularJS 1.2.12 and use the ngTouch 1.2.16 version.

I see you call a method whereas I set a scope variable. But even then, following your code, if you add the following code to your controller, it should work

    $scope.previous = function() {
        //Some logic, i guess going to the previous cube
    };
    $scope.next = function() {
        //Some logic, i guess going to the next cube
    };

This however requires you to have a controller that is bound to the view and which uses the $scope

[peter-mouland]

I do have those functions in the controller as you describe.

going through the versions of the docs (i.e http://code.angularjs.org/1.2.0/docs/api/ngTouch.directive:ngSwipeLeft) i have found that many people are complaining for a long time that the demos don't work.

i have not been able to load plnkr.co (always times-out) to play with the code, and have not been able to get it working locally either.

[bramslob]

I wish I could help you further, but on the basis of the code you presented I can't do much more. Perhaps you could provide some more insight in your app structure and primarily the controller.

The docs, and the ngSwipeLeft one in particular, are broken sometimes yeah. I hope they fix this soon.

[peter-mouland]

using JSBin i can confirm the functionality does work in 1.3.0 beta 1, it's the demo that broken

http://jsbin.com/saxunuwu/1/embed

[bramslob]

And does it work in your code as well ?

[peter-mouland]

not yet - will build up a simple example using ui-router and ng-view to see how i get on

[lefos987]

I tested the demo on iPhone 5 and with Chrome emulation and does not seem to work. @petebacondarwin seems that angular-touch is missing from the head of the iframe that is created and ng-app is empty.

[caitp]

angularjs.org has some directives for ensuring that the right scripts get loaded, it might be worth putting something like that in the docs app so that it's easier for these demos.

[petebacondarwin]

We just need to add a deps attribute to the examples, such as here:

https://github.com/angular/angular.js/blob/master/src/ngTouch/directive/ngSwipe.js#L22

<example module="touchApp" deps="angular-touch.js">
      <file name="index.html">
        <div ng-show="!showActions" ng-swipe-left="showActions = true">
          Some list content, like an email in the inbox
        </div>
        <div ng-show="showActions" ng-swipe-right="showActions = false">
          <button ng-click="reply()">Reply</button>
          <button ng-click="delete()">Delete</button>
        </div>
      </file>
      <file name="app.js">
        angular.module('touchApp', ['ngTouch']);
      </file>
    </example>