Ionic event didn't update the dynamic content


#1

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.