Question

本周我在移动应用上实施了滑动，发现没有明确的演示显示双向滑动。所以我想回馈社区一点我会写一个。直到我注意到一些我无法理解的奇怪行为。

我在演示中放了两个按钮来测试驱动演示。要滑动，您可以在文本旁边使用鼠标。当我加载演示并滑动已经存在的ngView从slideDir获取类时，会发生新的情况。发生这种情况是因为新视图具有新范围，并且不知道幻灯片应该是什么。

案例二是当我在滑动之前按下一个按钮时，创建了一个slideDir并填充了按钮正在使用的范围，因此滑动开始几乎表现得像它应该的那样（除了两个范围之间的某些同步问题）。 / p>

那么在我的配置中我做错了什么？我假设因为app控制器位于较高的铺设div上，所以每次加载新的ngView时都不会重新启动它。

以下网址包含演示：http://blackunknown.com/demos/swipingdemo/demo.html

这是我在body标签中的设置：

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

这是我的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;
        }
    };
});

编辑：要执行实际滑动，请不要使用按钮，而是单击文本旁边的拖动。

Answer 1

在您的网站上，您有

$scope.slideDir = 'slide-right';

位于AppCtrl的顶部。

删除它并且它有效。您在此处粘贴的代码没有该行，并且按预期工作。

在点击按钮之前，AngularJS ngClass不会应用于新的ngView

1 个答案: