Hi All,
I am trying to use the angular-timer in the application. When I tried to use the $scope.$on to update some of the variables on the html page it didn’t work. I can see the variable are getting updated in the function but when I tried to use the same in {{}} directive it didn’t work.
I have used bower install angular-timer to install the angular-timer(https://github.com/siddii/angular-timer).
Below is the code I am trying to use
controller.js
.controller('TimerCtrl', function ($scope) {
$scope.timerRunning = true;
$scope.timeSpent = {
seconds: 0,
minutes: 0,
hours: 0
};
$scope.timerConsole = 0;
$scope.timerType = '';
$scope.timeSpent.seconds = $scope.timerConsole / 1000;
$scope.test = $scope.timerConsole;
console.log('let see if it work = ', $scope.timeSpent.seconds);
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 += $scope.timerType + ' - event.name = '+ event.name + ', timeoutId = ' + args.timeoutId + ', millis = ' + args.millis +'\n';
//console.log("Timer = ", $scope.timerConsole);
// Let calculate the time we spent using the tick event
//console.log("Milliseconds = ", args.millis);
//function() {
//$scope.timeSpent.seconds = args.millis / 1000;
//$scope.timeSpent.minutes = $scope.timeSpent.seconds / 60;
//$scope.timeSpent.hours = $scope.timeSpent.minutes / 60;
//};
$scope.timerConsole += args.millis;
console.log($scope.timerConsole); //**This works but above comment code didnt**
//console.log("hey let check seconds = ", $scope.timeSpent.seconds);
});
console.log("hey let check seconds here = ", $scope.timeSpent.seconds);
$scope.$on('timer-stopped', function (event, data){
console.log('Timer Stopped - data = ', data);
})
})
app.js
.config(function ($stateProvider, $urlRouterProvider, $ionicConfigProvider) {
// Ionic uses AngularUI Router which uses the concept of states
// Learn more here: https://github.com/angular-ui/ui-router
// Set up the various states which the app can be in.
// Each state's controller can be found in controllers.js
$ionicConfigProvider.navBar.alignTitle('center');
$ionicConfigProvider.platform.android.tabs.style('standard');
$ionicConfigProvider.platform.android.tabs.position('bottom');
$stateProvider
.state('actions', {
url: '/actions',
templateUrl: "templates/actions.html",
controller: 'ActionsCtrl'
})
.state('login', {
url: '/login',
templateUrl: "templates/login.html"
})
.state('tabs', {
url: "/tab",
abstract: true,
templateUrl: "templates/tabs.html"
})
.state('tabs.home', {
url: "/home",
views: {
'home-tab': {
templateUrl: "templates/home.html",
controller: 'TimerCtrl'
}
}
})
.state('tabs.about', {
url: "/about",
views: {
'about-tab': {
templateUrl: "templates/about.html",
controller: 'AboutCtrl'
}
}
});
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise("/actions");
});
home.html
<!-- cache-view="false" will destroy the $scope on state change, triggering the $destroy event -->
<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 Spent : {{timeSpent.hours}}:{{timeSpent.minutes}}:{{timerConsole}}
</h2>
</div>
</div>
<div class="cards">
<div class="item item-text-wrap">
<h2 align="center">
Time Spent : {{timeSpent.hours}}:{{timeSpent.minutes}}:{{timerConsole}}
{{test}}
</h2>
</div>
</div>
</ion-view>
So any thought what I am missing.