Timer binding not working ionic

Question

I have created a stopwatch factory service, doesn't really do much besides running (reset and other features not implemented, just ignore them).

I set a $scope.time to receive the changes of the timer, however it isn't being updated.

I have tried many different approaches the last one I guess is really bad practice but I wanted to try and make it work.

my view:

<ion-view view-title="Clock">
  <ion-content>
    <div ng-controller="controller as ClockCtrl">
      <h1 ng-bind="ClockCtrl.time"></h1>
    </div>
  </ion-content>
</ion-view>

my Controller:

.controller('ClockCtrl', function($scope, Stopwatch) {
  var vm = $scope;
  $scope.time = "";
  Stopwatch.init($scope);
})

my service:

factory('Stopwatch', function() {
  var Stopwatch = (function() {
                var s;
                var isRunning = 0;
                var time = 0;
        var thatElement;
                function run(element){
                    if(isRunning !== 0){
                        time++;
                        s.mills = time % 10;
                        s.secs = Math.floor(time / 10);
                        s.mins = Math.floor(time / 10 / 60);
                        //Stopwatch.currentTime = ("0"+s.mins).slice(-2)+":"+("0"+s.secs).slice(-2)+":"+("0"+s.mills).slice(-2);
            thatElement.time = ("0"+s.mins).slice(-2)+":"+("0"+s.secs).slice(-2)+":"+("0"+s.mills).slice(-2);
                        setTimeout(run, 100);
                    }
                };

                return {
                    settings: {
                        currTime: "",
                        mills: 0,
                        secs: 0,
                        mins: 0,
                        i: 1,
                        times: ["00:00:00"],
                    },
                    currentTime: "",
                    init: function(element) {
                        thatElement = element;
                        s = this.settings;
                        this.start(element);
                    },
                    clear: function() {
                        s.i = 1,
                        s.mins = s.secs = s.mills = 0;
                        s.times = ["00:00:00"],
                        s.results.innerHTML = s.clearButton;
                    },
                    start:function(element){
                        isRunning = 1;
                        run(element);
                    },
                    stop: function(){
                        isRunning = 0;
                    }
                }

            })();
  return Stopwatch;
})

I know that the last approach is bad, I would accept any pointers, this is my first time using ionic, 2nd time trying angular.

Thanks in advance!

You should use your customized filter for format of time. Here is a very good example explained with both $timeout and $interval. Plus with customized filter. Run the snippet and see how that work http://stackoverflow.com/questions/32285679/angularjs-how-to-make-a-stop-watch-starting-from-000000-format/32285912#32285912 — Mudasser Ajaz, Sep 17 '15 at 22:05
Thanks for the nice reference, however in that example the code is inside of the controller and I want it to be fetched from the factory — Saar, Sep 17 '15 at 22:23

dfsq · Answer 1 · 2015-09-17T22:29:32.940

0

Since you are using controllerAs syntax you need to set controller instance property, not $scope object one:

.controller('ClockCtrl', function($scope, Stopwatch) {
  this.time = "";
  Stopwatch.init(this);
});

edited Sep 17 '15 at 22:29

answered Sep 17 '15 at 22:07

dfsq

191,768
25
236
258

Changing the code did not change the outcome unfortunately. any other ideas? when I debug I see that the vm.time is changing, but the binding doesn't (same as before). – Saar Sep 17 '15 at 22:21
You also need to pass `this` instead of `$scope` to `Stopwatch.init`. – dfsq Sep 17 '15 at 22:29
Yea, I tried it as well when I saw your code. no luck :-\ – Saar Sep 17 '15 at 22:34

Timer binding not working ionic

1 Answers1