AngularJS ngClass not applied on new ngView when swiped until button is clicked

Question

This week I implemented swiping on a mobile app and found no clear demo showing swiping in both directions. So I figured to give back to the community a little I would write one. That was until I noticed some strange behavior I couldn't understand.

I put two buttons up in the demo to test drive the demo. To swipe you can use your mouse next to the text. What happens is that when I load up the demo and swipe the already existing ngView gets the class from slideDir, the new one however does not. This happens because the new view has a new scope and has no idea what slideDir is supposed to be.

Case two is when I press a button before swiping, there is a slideDir created and filled in the scope the buttons are using and therefore swiping starts to almost behave like it should(other then some synch issues between two scopes).

So what in my configuration am I doing wrong? I had the assumption that because the app controller was on a higher laying div this was not re-initiated each time a new ngView was loaded.

The following url contains the demo: http://blackunknown.com/demos/swipingdemo/demo.html

Here is my set up in the body tag:

<div ng-app="app" ng-controller="AppCtrl">
    <button ng-click='swipeLeft()'>Swipe Left</button>
    <button ng-click='swipeRight()'>Swipe Right</button>

    <div class="slide" ng-view ng-class="slideDir" ng-swipe-left="swipeLeft()" ng-swipe-right="swipeRight()">
    </div>

    <!-- Templates loaded on url change -->
    <script type="text/ng-template" id="pg1.html">
        <H3>Slide 1</H3>
    </script>
    <script type="text/ng-template" id="pg2.html">
        <H3>Slide 2</H3>
    </script>
    <script type="text/ng-template" id="pg3.html">
        <H3>Slide 3</H3>
    </script>
</div>

Here is my javascript:

function AppCtrl($scope, $location, viewSlideIndex) {
    $scope.swipeLeft = function(){
        $scope.slideDir = 'slide-left';
    $scope.url = document.URL.substr(document.URL.lastIndexOf('/'));

        if($scope.url == "/pg1"){
            $scope.url = "/pg2";
        }
        else if ($scope.url == "/pg2"){
            $scope.url = "/pg3";
        }
        else if ($scope.url == "/pg3"){
            $scope.url = "/pg1";
        }

        $location.url($scope.url);
    }

    $scope.swipeRight = function(){
        $scope.slideDir = 'slide-right';
        $scope.url = document.URL.substr(document.URL.lastIndexOf('/'));

        if($scope.url == "/pg1"){
            $scope.url = "/pg3";
        }
        else if ($scope.url == "/pg2"){
            $scope.url = "/pg1";
        }
        else if ($scope.url == "/pg3"){
            $scope.url = "/pg2";
        }

        $location.url($scope.url);
    }
};

angular.module('app', ['ngRoute', 'ngAnimate', 'ngTouch'])
.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {
    $routeProvider.when('/pg1', {
        templateUrl: 'pg1.html',
        controller: AppCtrl
    });
    $routeProvider.when('/pg2', {
        templateUrl: 'pg2.html',
        controller: AppCtrl
    });
    $routeProvider.when('/pg3', {
        templateUrl: 'pg3.html',
        controller: AppCtrl
    });
    $routeProvider.otherwise({
        redirectTo: '/pg1'
    });
    $locationProvider.html5Mode(true);
}])
.service('viewSlideIndex', function () {
    var viewIndex;
    return {
        getViewIndex: function () {
            return viewIndex;
        },
        setViewIndex: function (val) {
            viewIndex = val;
        }
    };
});

EDIT: To perform an actual swipe don't use the buttons but click-drag next to the text.

I made a plunkr of your code and it seems to work in that environment. Only difference I think is not having jQuery. http://plnkr.co/edit/10LKKuv1dL9N4yNn3tCw — km6zla, Apr 09 '14 at 22:42
There is something different between the code you posted here and demo.js from your site. If I use the code here it works, if i paste demo.js it breaks. — km6zla, Apr 09 '14 at 22:44
The difference in demo.js was caused by me troubleshooting the problem. I was trying to see what would happen if I set slideDir initially. My apologies. — Blackunknown, Apr 10 '14 at 08:32
I checked out the plunkr. If you swipe without touching the buttons it still does not apply the slideDir on the new view. It performs some better though. Sadly still the same problem. The new one is supposed to slide in with the ng-enter styles but doesn't. — Blackunknown, Apr 10 '14 at 08:35

score 1 · Accepted Answer · answered Apr 09 '14 at 22:47

1

On your site, you have

$scope.slideDir = 'slide-right';

at the top of AppCtrl.

Remove this and it works. The code you have pasted here does not have that line and works as expected.

answered Apr 09 '14 at 22:47

km6zla

4,787
2
29
51

+1 for noticing. Sorry for the confusion caused by this line of code, I was trying to figure out if an initial value would make a change. – Blackunknown Apr 10 '14 at 08:43

AngularJS ngClass not applied on new ngView when swiped until button is clicked

1 Answers1