I am trying to get the total time passed once the user start the timer. I tried to use the 'timer-tick' event but didn't able to update the UI with the same. Below is the controller code I have wriiten
.controller('TimerCtrl', function ($scope) {
$scope.timerRunning = true;
$scope.timerConsole = 0;
$scope.timeSpent = '';
var items = document.getElementsByTagName('timer');
$scope.doStartDay = function () {
for (var i = 0; i < items.length; i++) {
items[i].start();
$scope.$broadcast('timer-start');
$scope.timerRunning = true;
}
}
$scope.doEndDay = function () {
for (var i = 0; i < items.length; i++) {
items[i].stop();
$scope.$broadcast('timer-stop');
$scope.timerRunning = false;
}
}
$scope.$on('timer-tick', function(event, args) {
$scope.timerConsole += args.millis;
console.log("Tick is =", $scope.timerConsole);
$scope.timeSpent = Math.round(args.millis / 1000);
console.log("Time is = ", $scope.timeSpent);
$scope.$apply($scope.timeSpent);
})
})
In the html page I have written below stuff
<ion-view view-title="Ionic Modals" cache-view="false">
<ion-nav-buttons side="secondary">
<button class="button icon-right ion-log-out" ng-click="doSomething()">LogOut</button>
</ion-nav-buttons>
<ion-content class="has-header padding">
<div class="card">
<div class="item item-text-wrap">
<div class="button-bar">
<a class="button" ng-click="doStartDay()">Start</a>
<a class="button" ng-click="doEndDay()">End</a>
</div>
</div>
<div class="item item-divider">
<h2 align="center">
<timer auto-start="false" interval="1000">{{hhours}} hour{{hhoursS}}, {{mminutes}} minute{{minutesS}}, {{sseconds}} second{{secondsS}}.</timer><br/>
Time is {{timeSpent}}
</h2>
</div>
</div>
</ion-content>
</ion-view>
Now if I comment $scope.$apply()
then the UI didn't get updated. But if un-comment the code then I get below error
1752 278863 error Error: [$rootScope:inprog] $apply already in progress
http://errors.angularjs.org/1.3.13/$rootScope/inprog?p0=%24apply
at beginPhase (http://192.168.1.104:8100/lib/ionic/js/ionic.bundle.js:23582:9
)
at Scope.prototype.$apply (http://192.168.1.104:8100/lib/ionic/js/ionic.bundl
e.js:23326:11)
at Anonymous function (http://192.168.1.104:8100/js/controllers.js:134:4)
at Scope.prototype.$emit (http://192.168.1.104:8100/lib/ionic/js/ionic.bundle
.js:23474:15)
at m (http://192.168.1.104:8100/lib/angular-timer/dist/angular-timer.min.js:8
:4840)
at c[0].start (http://192.168.1.104:8100/lib/angular-timer/dist/angular-timer
.min.js:8:3621)
at $scope.doStartDay (http://192.168.1.104:8100/js/controllers.js:117:5)
at $parseFunctionCall (http://192.168.1.104:8100/lib/ionic/js/ionic.bundle.js
:21171:7)
at Anonymous function (http://192.168.1.104:8100/lib/ionic/js/ionic.bundle.js
:53674:9)
at Scope.prototype.$eval (http://192.168.1.104:8100/lib/ionic/js/ionic.bundle
.js:23228:9)
So how to get the time spent post the timer is triggered.