Я создаю приложение iOS с Ionic. Приложение представляет собой таймер, в котором пользователь будет указывать ограничение по времени, а затем обратный отсчет времени для определенной активности. Я пытаюсь достичь взаимодействия, когда пользователь будет перетаскивать ручку вокруг внешней окружности, и каждое вращение по часовой стрелке увеличивает время на одну минуту, а движение в противоположном направлении уменьшится на единицу.
У меня есть круг, в котором вы можете перетащить ручку, и она будет придерживаться границ контейнера. Теперь я пытаюсь использовать Moment.js для создания обратного отсчета, но мне трудно получить значения таймера для обновления внутри сенсорного события.
$scope.duration
- это то, что я использую для отслеживания значения таймера. Я попытался использовать метод moment().duration()
для указания объекта продолжительности и инициализировать его до '00: 00: 00 '. Когда я пытаюсь обновить это значение в событии touch gesture, я не могу обновить значение таймера. Я предполагаю, что я либо не понимаю, как правильно применять обновленные значения области в Angular/Ionic, я не знаю, как правильно использовать Moment.js, или, вполне возможно, - оба.
Вот мой код шаблона:
<ion-view hide-nav-bar="true" view-title="Dashboard">
<ion-content>
<div class="timer">
<div class="timer-slider"></div>
<span class="timer-countdown">
{{duration}}
</span>
</div>
</ion-content>
</ion-view>
И мой большой контроллер:
.controller('DashCtrl', function($scope, $ionicGesture) {
var $timer = angular.element(document.getElementsByClassName('timer')[0]);
var $timerSlider = angular.element(document.getElementsByClassName('timer-slider')[0]);
var timerWidth = $timer[0].getBoundingClientRect().width;
var sliderWidth = $timerSlider[0].getBoundingClientRect().width;
var radius = timerWidth / 2;
var deg = 0;
var X = Math.round(radius * Math.sin(deg*Math.PI/180));
var Y = Math.round(radius * -Math.cos(deg*Math.PI/180));
var counter = 0;
$scope.duration = moment().hour(0).minute(0).second(0).format('HH : mm : ss');
// Set timer circle aspect ratio
$timer.css('height', timerWidth + 'px');
$timerSlider.css({
left: X + radius - sliderWidth / 2 + 'px',
top: Y + radius - sliderWidth / 2 + 'px'
});
$ionicGesture.on('drag', function(e) {
e.preventDefault();
var pos = {
x: e.gesture.touches[0].clientX,
y: e.gesture.touches[0].clientY
};
var atan = Math.atan2(pos.x - radius, pos.y - radius);
deg = -atan/(Math.PI/180) + 180; // final (0-360 positive) degrees from mouse position
// for attraction to multiple of 90 degrees
var distance = Math.abs( deg - ( Math.round(deg / 90) * 90 ) );
if ( distance <= 5 || distance >= 355 )
deg = Math.round(deg / 90) * 90;
if(Math.floor(deg) % 6 === 0) {
console.log(Math.floor(deg));
$scope.duration = moment().hour(0).minute(0).second(counter++).format('HH : mm : ss');
}
if (deg === 360)
deg = 0;
X = Math.round(radius * Math.sin(deg * Math.PI / 180));
Y = Math.round(radius * -Math.cos(deg * Math.PI / 180));
$timerSlider.css({
left: X + radius - sliderWidth / 2 + 'px',
top: Y + radius - sliderWidth / 2 + 'px'
});
}, $timerSlider);
})
Я взломал демо-версию CodePen. Он не очень хорошо отслеживает событие перетаскивания без мобильного формата, но вы можете получить представление о том, что я собираюсь сделать.
http://codepen.io/stat30fbliss/pen/xZRrXY
Здесь снимок экрана приложения в процессе
После обновления $scope.duration
запустите $scope.$apply()
$scope.duration
$scope.$apply()
и он должен начать работать :)