I write mobile app on AngularJS and ionic framework. My problem in this code:
var App = angular.module('app', ['ionic']);
App.controller('TimerCtrl', function($scope, $ionicPlatform) {
$scope.timer = {};
$scope.timer.day = 0;
$scope.initApp = function() {
// some init variables and functions
$scope.timer.day = 145;
// other vars and funcs...
};
$ionicPlatform.ready(function() {
$scope.initApp();
});
});
Why after the app start {{timer.day}} is equal to 0? I have some button that do some action on the page. After I press this button {{timer.day}} changes to 145.
index.html code:
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="utf-8" />
<title>app</title>
<script type="text/javascript" src="lib/ionic/js/ionic.bundle.min.js"></script>
<script type="text/javascript" src="js/ng-cordova.min.js"></script>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/app.js"></script>
</head>
<body ng-controller="TimerCtrl">
<div id="main" class="padding">
<div class="row">
<div class="col col-75">
<div>День {{timer.day}}</div>
</div>
<div id="buttons" class="col col-25">
<button class="button icon ion-play button-clear timer-button" ng-click="startTimer()" ng-show="!timerStart"></button>
</div>
</div>
</div>
<div class="bar bar-footer">
<button class="button icon ion-refresh" ng-click="showHardResetPopup()"></button>
</div>
</body>
</html>
Probably you don't need to call $ionicPlatform.ready because generally is used to wrap code that works with some plugins. So in my opinion you should try something like this: see this fiddle demo
var App = angular.module('app', ['ionic']);
App.controller('TimerCtrl', function($scope) {
$scope.timer = {};
$scope.timer.day = 0;
$scope.incrementDay = function() {
$scope.timer.day += 1;
};
$scope.incrementDay(); // when the controller is loaded increment +1 day
});
html:
{{timer.day}}
<button class="button button-stable" ng-click="incrementDay()">
Increment timer day
</button>
I don't know $ionicPlatform
but seems but a $scope.$apply();
after your $scope.initApp();
can solve your problem.
Let me know if this helps.
dont use $scope.$apply(). $ionicPlatform is a angular module, no need of "apply" here.
please debug with console.log if the ready function are really called on ionic ready.
I think it would be better to post html code too or at least to tell if the initApp() function is called when clicking the button or some other function is bound to this button. initApp() should be called if it is in the scope of TimerCtrl, otherwise may be $ionicPlatform never get ready like [here]?1