볼 각도 서비스를 바인딩

Question

큰 프로젝트의 일부로 카운트 다운 시계를 만들었습니다. 여기에 내가 secondsRemaining을 바인딩하는 방법을 알아낼 수 없습니다

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

에 연결된 컨트롤러에서에 전화 서비스에 대한 코드는 ~ $ scope.seconds. 나는 약 1 시간 동안이 물건을 찾아 내려고 노력했다. 나는 기능적인 프로그래밍에있어서 위구가 아니므로 나는 단지 잘못 생각하고 있다고 느낍니다.

Answer 1

를 주입 서비스에 $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

Answer 2

대신 함수를 사용할 수 있습니다 :

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

그런 다음

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

당신은 다음과 같이 템플릿에서 사용할 수 있습니다 제거 : 스팍 말했듯이

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

하지만 먼저, 당신은 대신하여 setInterval의 $ 간격을 사용해야합니다 .