定时器绑定不起作用离子

Question

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

我设置了一个$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;
})

我知道最后一种方法不好，我会接受任何指针，这是我第一次使用 ionic，第二次尝试 angular。

提前致谢！

Answer 1

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

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