На этой неделе я реализовал смахивание в мобильном приложении и не нашел четкой демонстрации, показывающей смахивание в обоих направлениях. Поэтому я решил немного вернуть сообществу, я бы написал один. Так было до тех пор, пока я не заметил какое-то странное поведение, которое не мог понять.
Я поместил две кнопки в демо, чтобы протестировать демо. Чтобы провести пальцем, вы можете использовать мышь рядом с текстом. Что происходит, так это то, что когда я загружаю демо и прокручиваю уже существующий ngView, он получает класс из slideDir, а новый - нет. Это происходит из-за того, что новое представление имеет новую область видимости и не имеет представления о том, каким должен быть slideDir.
Случай второй: когда я нажимаю кнопку перед смахиванием, создается слайд-каталог и заполняется областью, которую используют кнопки, и поэтому смахивание начинает вести себя почти так, как должно (кроме некоторых проблем с синхронизацией между двумя областями).
Итак, что в моей конфигурации я делаю неправильно? У меня было предположение, что, поскольку контроллер приложения находился на более высоком уровне div, он не инициировался повторно каждый раз при загрузке нового ngView.
Следующий URL содержит демонстрацию: 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;
}
};
});
РЕДАКТИРОВАНИЕ: чтобы выполнить фактическое смахивание, не используйте кнопки, а щелкните и перетащите рядом с текстом.
