綁定角度服務查看

我創建了一個倒計時時鐘作爲大型項目的一部分。下面是服務綁定角度服務查看

'use strict'; 

angular.module('myApp') 
    .service('Countdownclock', function Countdownclock() { 
     var secondsRemaining = 0; 
     var timerProcess; 
     return { 
      //initialize the clock 
      startClock: function(minutes) { 
       secondsRemaining = minutes * 60; 
       timerProcess = setInterval(this.timer, 1000); 
      }, 
      //timer function 
      timer: function() { 
       secondsRemaining -= 1; 
       if (secondsRemaining <= 0) { 
        clearInterval(timerProcess); 
       } 
      }, 
      //get time 
      getTime: function() { 
       return secondsRemaining; 
      }, 
      //add time 
      addTime: function(seconds) { 
       secondsRemaining += seconds; 
      }, 
      //stop clock 
      stopClock: function() { 
       secondsRemaining = 0; 
       clearInterval(timerProcess); 
      } 
     }; 
    });

然後我調用它的從控制器，該控制器還鏈接到一個視圖

'use strict'; 

angular.module('myApp') 
    .controller('MainCtrl', function($scope, Countdownclock) { 
     Countdownclock.startClock(1); 
     $scope.seconds = Countdownclock.getTime(); 
     $scope.$watch(Countdownclock.getTime(), function(seconds) { 
      $scope.seconds = Countdownclock.getTime(); 
     }); 
    });

出於某種原因，我無法弄清楚如何綁定secondsRemaining代碼到$ scope.seconds。我一直在試圖弄清楚這個事情大概一個小時。我在功能編程上並不完全是一個智者，所以我有一種感覺，我只是在想它是錯的。

來源

2014-03-31 Jake

你不應該使用setInterval或clearInterval方法。使用Angular等價物。抱歉在移動設備上，這限制了我的寫作。請稍後再試看看 – Spock

試試$ scope。$ watch（'seconds'，..... – Whisher

進樣$interval爲您服務，並用它代替setInterval：

timerProcess = $interval(this.timer, 1000);

如果你想使用一個觀察者，你可以這樣註冊它：

$scope.$watch(function() { return Countdownclock.getTime(); }, function (newValue, oldValue) { 
    // Might be identical when called due to initialization - Good to know for some cases 
    if (newValue !== oldValue) { 
    $scope.seconds = newValue; 
    } 
});

演示：http://plnkr.co/edit/usUoOtWMwoDRht27joOA?p=preview

來源

2014-03-31 20:25:58 tasseKATT

您可以改用其他功能：

$scope.seconds = function() { return Countdownclock.getTime() };

然後取出

$scope.$watch(Countdownclock.getTime(), function(seconds) { 
    $scope.seconds = Countdownclock.getTime(); 
});

然後，您可以用它在你的模板是這樣的：

<div>{{seconds()}}</div>

但是，首先，像斯波克說，你必須使用$間隔代替的setInterval 。

來源

2014-03-31 20:29:35 Mathew

綁定角度服務查看

回答

相關問題