2014-01-21 85 views
1

是否可以使用$ watch綁定serviceProvider的日期?AngularJS - 綁定到提供程序屬性

我的問題是我可以將數據從提供者服務綁定到我的視圖?
我嘗試綁定我的視圖中提供的$ get對象,因爲提供程序在init階段加載,沒有控制器。

我嘗試這種方式,但我沒有更新。 http://plnkr.co/edit/t3PrE6lX1EDIMuqKyTW0?p=preview

<body ng-app="ServiceNotification"> 
    <div style="border-style:dotted" ng-controller="TimerCtrl1"> 
     TimerCtrl1<br/> 
     Last Updated: {{lastUpdated}}<br/> 
     Last Updated: {{calls}}<br/> 
    </div> 

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.js"></script> 
<script type="text/javascript"> 
    var app = angular.module("ServiceNotification", []); 

    function TimerCtrl1($scope, Timer) { 
     $scope.$watch(function() { return Timer.data; }, function (data){ 
      console.log("In $watch - data:" + data); 
      $scope.lastUpdated = data.lastUpdated; 
      $scope.calls = data.calls; 
     }, true); // <-- don't forgt the true 
    }; 

    app.provider("Timer", function() { 

     this.$get = function() { 
     var data = { lastUpdated: new Date(), calls: 0 }; 

      var updateTimer = function() { 
      data.lastUpdated = new Date(); 
      data.calls += 1; 
      console.log("updateTimer: " + data.lastUpdated); 

      window.setTimeout(updateTimer, 5000); 
     }; 
     updateTimer(); 

     return { 
      data: data 
     } 
     } 
    }); 
</script> 

感謝托馬斯

+0

請在這裏發表您的代碼,如果該鏈接將到期,或將成爲unaccessable,這個問題將有較少的意識。 –

回答

0

你沒有更新造成的setTimeout回調叫出來的消化週期。有一個特殊的$timeout包角(http://docs.angularjs.org/api/ng.$timeout),你可以注入你的$get供應商的方法。

app.provider("Timer", function() { 
    this.$get = function($timeout) { 
    var data = { lastUpdated: new Date(), calls: 0 }; 

    var updateTimer = function() { 
     data.lastUpdated = new Date(); 
     data.calls += 1; 
     console.log("updateTimer: " + data.lastUpdated); 
     $timeout(updateTimer, 5000); 
    }; 
    updateTimer(); 

    return { 
     data: data 
    } 
    } 
}); 

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