定时器绑定不起作用离子

时间:2015-09-17 21:57:10

标签: javascript angularjs binding ionic-framework ionic

我已经创建了一个秒表工厂服务,除了运行之外并没有做太多事情(重置和其他未实现的功能,只需忽略它们)。

我设置了一个$scope.time来接收定时器的更改,但它没有更新。

我尝试了许多不同的方法,我认为这是非常糟糕的做法,但我想尝试让它发挥作用。

我的观点:

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

我的控制器:

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

我的服务:

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;
})

我知道最后一种方法很糟糕,我会接受任何指针,这是我第一次使用离子,第二次尝试角度。

提前致谢!

1 个答案:

答案 0 :(得分:0)

由于您使用的是controllerAs语法,因此需要设置控制器实例属性,而不是$scope对象1:

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